h1 {
  font-size: var(--type-simple-h1-size);
  line-height: var(--type-simple-h1-line-height);
  margin: 0rem;
}
h2 {
  font-size: var(--type-simple-h2-size);
  line-height: var(--type-simple-h2-line-height);
}
h3 {
  font-size: var(--type-simple-h3-size);
  line-height: var(--type-simple-h3-line-height);
  max-width: 85ch;
}

h4 {
  font-size: var(--type-simple-p-size);
  line-height: var(--type-simple-p-line-height);
  color: var(--gray-800);
}
P {
  font-size: var(--type-simple-p-size);
  line-height: var(--type-simple-p-line-height);
  color: var(--gray-600);
  max-width: 100ch;
  text-align: justify;
}
.para-small {
  font-size: var(--type-simple-p-small-size);
  line-height: var(--type-simple-p-small-line-height);
  color: var(--gray-700);
}

.card-headings {
  font-size: var(--type-simple-p-size);
  line-height: var(--type-simple-p-line-height);
  color: var(--gray-700);
}

ul.list-simple {
  margin: 0rem;

  list-style-type: disc;
}
li.list-item-simple {
  margin-left: var(--space-md);
  padding: var(--space-xs) 0rem;
  font-size: var(--type-simple-p-size);
  line-height: var(--type-simple-p-line-height);
  color: var(--gray-600);
  max-width: 85ch;
  text-align: justify;
}

.alert-text {
  color: tomato;
}

body {
  max-width: 3000px;
  margin: 0rem auto;
  font-family: var(--font-raleway);
  font-size: var(--type-simple-p-size);
  color: var(--color-text-primary);
  background-color: var(--color-page-bg);
}

.body-overfolow-hidden {
  overflow: hidden;
}

@media (min-width: 0px) and (max-width: 1024px) {
  body {
    padding: var(--space-lg) var(--space-md) 10rem var(--space-md);
  }
}
@media (min-width: 1024px) and (max-width: 1440px) {
  body {
    padding: var(--space-lg) var(--space-lg) 10rem var(--space-lg);
  }
}
@media (min-width: 1441px) {
  body {
    padding: var(--space-lg) var(--space-1920) 10rem var(--space-1920);
  }
}
@media (min-width: 1921px) {
  body {
    padding: var(--space-lg) var(--space-2560) 10rem var(--space-2560);
  }
}
@media (min-width: 2561px) {
  body {
    padding: var(--space-lg) var(--space-3840) 10rem var(--space-3840);
  }
}

.site-header-outer {
  position: sticky;
  top: 0px;
  padding-top: 0.75rem;
  z-index: 100;
  background-color: var(--color-page-bg);
}

.site-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 40px 40px;

  width: 100%;
  height: var(--site-header-height);
  margin: var(--space-md) auto var(--space-md) auto;
  padding-bottom: var(--space-md);
}

.site-header-title-wrapper {
  grid-column: 1/2;
  grid-row: 1/2;
  margin-right: auto;
  text-decoration: none;
  font-size: var(--type-simple-h1-size);
  color: var(--color-text-primary);
}
h1.site-header-title span {
  text-decoration: none;
  font-size: var(--type-simple-h3-size);
  margin-left: var(--space-sm);
  color: var(--gray-400);
}

.site-nav {
  grid-column: 2/3;
  grid-row: 1/2;
  justify-self: right;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.site-header-menu {
  z-index: 99;
  display: grid;
  grid-template-columns: 50px repeat(2, 88px) 50px 50px;
  grid-template-rows: repeat(3, 20px);
  /* justify-items: end; */
  column-gap: var(--space-md);
  row-gap: var(--space-xs);
}

.site-header-menu a {
  font-size: var(--text-xs);
  text-decoration: none;
  text-transform: capitalize;
  color: var(--color-text-primary);
}

.site-header-menu a:hover,
.site-header-menu a:focus-visible {
  color: var(--color-text-primary);
  outline: none;
}

.site-header-menu li.is-active a {
  color: var(--color-text-primary);
  font-weight: var(--font-semi-bold);
}

/* --- */
/* --- */
.home-li {
  grid-row: 1/2;
  grid-column: 1/2;
}
/* --- */
.painting-series-li {
  grid-row: 1/2;
  grid-column: 2/3;
}
/* --- */
.digital-art-li {
  grid-row: 1/2;
  grid-column: 3/4;
}
/* --- */
.about-li {
  grid-row: 1/2;
  grid-column: 4/5;
}
/* --- */
.shop-li {
  grid-row: 1/2;
  grid-column: 5/6;
}
/* --- */
/* --- */
.portraits-li {
  grid-row: 2/3;
  grid-column: 2/3;
}
/* --- */
.colaborations-li {
  grid-row: 2/3;
  grid-column: 3/4;
}
/* --- */
.press-li {
  grid-row: 2/3;
  grid-column: 4/5;
}
/* --- */
/* --- */
/* --- */
.drawings-li {
  grid-row: 3/4;
  grid-column: 2/3;
}
/* --- */
.exhibitions-li {
  grid-row: 3/4;
  grid-column: 3/4;
}
/* --- */
.contact-li {
  grid-row: 3/4;
  grid-column: 4/5;
}
/* --- */
/* --- */
/* --- */

/* --- Mobile hamburger button -------------------------------- */
.nav-toggle {
  grid-column: 2/3;
  grid-row: 1/2;
  display: none;
  justify-self: end;
  align-self: self-start;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-primary);

  border-radius: var(--radius-sm);
  line-height: 0;
}
.nav-toggle svg {
  stroke-width: 1;
}
.nav-toggle:focus-visible {
  outline: 2px solid var(--color-text-primary);
  outline-offset: 2px;
}
.nav-toggle .nav-toggle__icon-close {
  display: none;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__icon-open {
  display: none;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__icon-close {
  display: block;
}

/* --- Slide-down nav drawer ---------------------------------- */
.nav-drawer-wrapper {
  z-index: 3;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: 0fr;

  transition: grid-template-rows 0.35s ease;
}
.nav-drawer-wrapper.is-open {
  grid-template-rows: 1fr;
}
.nav-overlay {
  min-height: 0;
  background-color: var(--color-page-bg);
}

.site-header-menu-overlay {
  display: grid;
  grid-template-columns: repeat(2, 90px);
  grid-template-rows: repeat(7, 20px);
  /* justify-items: end; */
  column-gap: var(--space-lg);
  row-gap: var(--space-xs);

  margin-left: var(--space-sm);
}

.site-header-menu-overlay a {
  font-size: var(--text-xs);
  text-decoration: none;
  text-transform: capitalize;
  color: var(--color-text-primary);
}

.site-header-menu-overlay a:hover,
.site-header-menu-overlay a:focus-visible {
  color: var(--color-text-primary);
  outline: none;
}

.site-header-menu-overlay li.is-active a {
  color: var(--color-text-primary);
  font-weight: var(--font-semi-bold);
}
/* --- */
/* --- */
.home-li-overlay {
  grid-row: 1/2;
  grid-column: 1/2;
}
/* --- */
.painting-series-li-overlay {
  grid-row: 2/3;
  grid-column: 1/2;
}
/* --- */
.digital-art-li-overlay {
  grid-row: 3/4;
  grid-column: 1/2;
}
/* --- */
.about-li-overlay {
  grid-row: 4/5;
  grid-column: 1/2;
}
/* --- */
.shop-li-overlay {
  grid-row: 5/6;
  grid-column: 1/2;
}
/* --- */
/* --- */
.portraits-li-overlay {
  grid-row: 6/7;
  grid-column: 1/2;
}
/* --- */
.colaborations-li-overlay {
  grid-row: 1/2;
  grid-column: 2/3;
}
/* --- */
.press-li-overlay {
  grid-row: 2/3;
  grid-column: 2/3;
}
.drawings-li-overlay {
  grid-row: 3/4;
  grid-column: 2/3;
}
/* --- */
.exhibitions-li-overlay {
  grid-row: 4/5;
  grid-column: 2/3;
}
/* --- */
.contact-li-overlay {
  grid-row: 5/6;
  grid-column: 2/3;
}
/* --- */

/* --- */
.site-header-menu-overlay-bk-btn {
  grid-column: 1/-1;
  grid-row: 2/3;

  view-transition-name: none;

  display: none;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  height: 40px;
}
.back-btn-wrapper {
  opacity: 0;
  pointer-events: none;

  justify-self: center;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 40px;
  text-decoration: none;
  font-family: var(--font-raleway);
  font-size: var(--type-simple-p-size);
  font-weight: 600;

  color: var(--color-text-primary);
  border-top: 1px dotted var(--color-border-subtle);
  background-color: var(--color-page-bg);
}
.back-btn-wrapper:hover {
  color: var(--gray-400);
}

.back-btn-wrapper svg {
  stroke-width: 1px;
}

.spa-main {
  /* min-height: 400px; */
  /* border: 2px dotted tomato; */
  overflow: hidden;
}
.spa-section {
  padding-bottom: 3rem;
  /* border: 2px dotted green; */
}

/* ── Home section ── */
/* ------------------ */
/* ------------------ */
/* ------------------ */
.spa-home {
  position: relative;
  height: calc(100dvh - 260px);
  margin-bottom: var(--space-lg);
  overflow: hidden;
}

/* ── Home lightbox / carousel (spa-hlb-*) ── */
/* Independent of the existing spa-lb-* lightbox */
/* ─────────────────────────────────────────── */

/* Desktop stage grid — narrow edge columns for nav buttons, centre
   column owns the image so the link is always clickable */
.spa-hlb-stage {
  display: grid;
  grid-template-columns: 60px 1fr 60px;
  width: 100%;
  height: 100%;
}

.spa-hlb-figure {
  grid-column: 2 / 3;
  grid-row: 1 / -1;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

/* Each animated wrap fills the figure absolutely — centres the inner wrapper */
.spa-hlb-image-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Inner wrapper is content-sized so the caption aligns to the image edge */
.spa-hlb-image-wrap .spa-hlb-slide-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
}

.spa-hlb-image-wrap picture {
  display: block;
  max-width: 100%;
  line-height: 0;
}

.spa-hlb-image-wrap img {
  max-width: 100%;
  max-height: calc(100dvh - 280px);
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.spa-hlb-image-wrap img[data-link] {
  cursor: pointer;
}

.spa-hlb-image-wrap img[data-link]:hover {
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

/* Caption flush-left under the image (works in both desktop wrap and carousel) */
.spa-hlb-caption {
  align-self: flex-start;
  font-size: var(--type-simple-p-small-size);
  line-height: var(--type-simple-p-small-line-height);
  color: var(--color-captions);
  padding: var(--space-xs) 0;
}

/* ── Slide keyframes — cubic-bezier gives inertia feel ── */
@keyframes hlb-enter-right {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes hlb-exit-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes hlb-enter-left {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes hlb-exit-right {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

.spa-hlb-image-wrap[data-anim="enter-right"] {
  animation: hlb-enter-right 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.spa-hlb-image-wrap[data-anim="exit-left"] {
  animation: hlb-exit-left 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  pointer-events: none;
}
.spa-hlb-image-wrap[data-anim="enter-left"] {
  animation: hlb-enter-left 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.spa-hlb-image-wrap[data-anim="exit-right"] {
  animation: hlb-exit-right 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .spa-hlb-image-wrap[data-anim] {
    animation-duration: 0.01s;
  }
}

/* Prev / next nav buttons occupy the edge columns only */
.spa-hlb-nav {
  display: flex;
  cursor: pointer;
  color: var(--color-text-primary);
  background: none;
  border: none;
  padding: 0;
}

.spa-hlb-nav--prev {
  grid-column: 1 / 2;
  grid-row: 1 / -1;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  padding-left: var(--space-xs);
}

.spa-hlb-nav--prev svg {
  color: var(--gray-300);
}

.spa-hlb-nav--prev:hover svg {
  color: var(--gray-800);
  display: flex;
}

.spa-hlb-nav--next {
  grid-column: 3 / 4;
  grid-row: 1 / -1;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  padding-right: var(--space-xs);
}

.spa-hlb-nav--next svg {
  color: var(--gray-300);
}

.spa-hlb-nav--next:hover svg {
  color: var(--gray-800);
}

/* Mobile scroll-snap carousel */
.spa-hlb-carousel {
  display: none;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.spa-hlb-carousel::-webkit-scrollbar {
  display: none;
}

.spa-hlb-track {
  display: flex;
  height: 100%;
}

.spa-hlb-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Inner wrapper keeps picture + caption as a content-sized column */
.spa-hlb-slide-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  padding: 0 var(--space-sm);
}

.spa-hlb-slide img {
  max-width: 100%;
  max-height: calc(100dvh - 280px);
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.spa-hlb-slide img[data-link] {
  cursor: pointer;
}

/* ≤ 900px: hide stage, show carousel */
@media (max-width: 900px) {
  .spa-hlb-stage {
    display: none;
  }

  .spa-hlb-carousel {
    display: block;
  }
}

/* > 900px: show stage, hide carousel */
@media (min-width: 901px) {
  .spa-hlb-stage {
    display: grid;
  }

  .spa-hlb-carousel {
    display: none;
  }
}

/* ── About section ── */
/* ------------------ */
/* ------------------ */
/* ------------------ */
.about-heading {
  font-size: var(--type-simple-h2-size);
}
.about-sub-heading {
  font-size: var(--type-simple-h3-size);
}

.about-images-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto auto auto;
  gap: var(--space-sm);

  max-width: 100ch;
  margin-top: var(--space-lg);
}

.about-images-grid__item:nth-child(1) {
  grid-column: span 3;
}
.about-images-grid__item:nth-child(2) {
  grid-column: span 3;
}

.about-images-grid__item:nth-child(3) {
  grid-column: span 2;
}
.about-images-grid__item:nth-child(4) {
  grid-column: span 2;
}
.about-images-grid__item:nth-child(5) {
  grid-column: span 2;
}

.about-images-grid__item:nth-child(6) {
  grid-column: span 3;
}
.about-images-grid__item:nth-child(7) {
  grid-column: span 3;
}

.about-images-grid__item {
  overflow: hidden;
}

.about-images-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.4s ease;
}

.about-images-grid__item img:hover {
  opacity: 0.8;
}

about-images-grid__item--landscape img {
  aspect-ratio: 7 / 6;
}

.about-images-grid__item--portrait img {
  aspect-ratio: 3 / 4;
}

.paintings-series-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  justify-content: space-between;
  column-gap: var(--space-xl);
  row-gap: var(--space-lg);
  margin-top: var(--space-lg);
}

@media (max-width: 810px) {
  .paintings-series-grid {
    grid-template-columns: repeat(2, 1fr);

    column-gap: var(--space-lg);
    row-gap: var(--space-md);
  }
}

.paintings-series-grid-item {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
}
.paintings-series-grid-item-title {
  font-family: var(--font-raleway);
  font-weight: 300;
  font-size: var(--type-simple-p-small-size);
  color: var(--color-caption);
}
.paintings-series-grid-img-container {
  overflow: hidden;
  background-color: var(--color-page-bg);
}

.paintings-series-grid-img-container img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: opacity 0.4s ease;
}

.paintings-series-grid-img-container img:hover {
  opacity: 80%;
}

[data-has-series="true"] {
  cursor: pointer;
}
.paintings-series-grid-item__btn {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
[data-has-series="true"] .paintings-series-grid-img-container img {
  transition: opacity 0.3s ease;
}
[data-has-series="true"]:hover .paintings-series-grid-img-container img {
  opacity: 0.8;
}
/* ---------------------- */
/* ---------------------- */
/* ---------------------- */
.drawings-series-grid-img-container {
  overflow: hidden;
  background-color: var(--color-page-bg);
}

.drawings-series-grid-img-container img {
  width: 100%;
  aspect-ratio: 9/12;
  object-fit: cover;
  transition: opacity 0.4s ease;
}

.drawings-series-grid-img-container img:hover {
  opacity: 80%;
}

[data-has-series="true"] {
  cursor: pointer;
}
.drawings-series-grid-item__btn {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
[data-has-series="true"] .drawings-series-grid-img-container img {
  transition: opacity 0.3s ease;
}
[data-has-series="true"]:hover .drawings-series-grid-img-container img {
  opacity: 0.8;
}

.spa-lightbox-section {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 200px);
  background-color: var(--color-page-bg);
}

.spa-lb-stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  height: calc(100dvh - 180px);
  touch-action: pan-y;
}

.spa-lb-figure {
  grid-column: 1/-1;
  grid-row: 1/-1;
  z-index: 2;

  align-self: center;
  justify-self: center;
}
.spa-lb-image-wrap {
  display: grid;
  grid-template-rows: auto auto;
  width: fit-content;
  max-width: 100%;
}
.spa-lb-image-wrap picture,
.spa-lb-image-wrap img {
  max-width: 100%;
  max-height: calc(100dvh - 220px);
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.spa-lb-image-wrap picture {
  transition: opacity 0.5s ease;
}
.spa-lb-image-wrap picture.spa-lb-pic--out {
  opacity: 0;
}

.spa-lb-nav {
  z-index: 3;
  display: flex;
  cursor: pointer;
  color: var(--color-text-primary);
  background: none;
}

.spa-lb-nav--prev {
  z-index: 3;
  grid-column: 1/2;
  grid-row: 1/-1;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
}

.spa-lb-nav--prev svg {
  display: none;
}

.spa-lb-nav--prev:hover svg {
  display: flex;
}

.spa-lb-nav--next {
  z-index: 3;
  grid-column: 2/3;
  grid-row: 1/-1;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
}
.spa-lb-nav--next svg {
  display: none;
}

.spa-lb-nav--next:hover svg {
  display: flex;
}

.spa-lb-footer {
  padding-top: var(--space-sm);
  text-align: right;
}

.spa-lb-caption {
  opacity: 0;
  transition: opacity 0.4s ease;
  padding: var(--space-sm) 0rem;
  font-size: var(--type-simple-p-small-size);
  color: var(--gray-500);
}
.spa-lb-caption.is-visible {
  opacity: 1;
}

.spa-lb-carousel {
  display: none;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.spa-lb-carousel::-webkit-scrollbar {
  display: none;
}

.spa-lb-track {
  display: flex;
  height: 100%;
  /* pin the track to the carousel width; otherwise its min-content (the widest
     image's natural width) can make it wider than the viewport, so every slide
     is centred in an over-wide box and appears shifted right */
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
}

.spa-lb-slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  height: 100%;
  scroll-snap-align: start;
  /* center the img-wrap (image + caption as a unit) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.spa-lb-slide-wrap {
  /* content-sized: wraps exactly the rendered image + caption */
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  padding: var(--space-sm);
}

.spa-lb-slide-picture {
  display: block;
  line-height: 0;
  max-width: 100%;
}

.spa-lb-slide-img {
  display: block;

  max-width: 100%;

  max-height: calc(100dvh - var(--site-header-height) - 1.5rem);
  width: auto;
  height: auto;
}

.spa-lb-slide-caption {
  display: flex;
  align-self: flex-start;
  font-size: var(--type-simple-p-small-size);
  line-height: var(--type-simple-p-small-line-height);
  color: var(--color-captions);
  padding: var(--space-xs) 0;
}
/* LIGHTBOX ARTICLES SECTIONS */
/* -------------------------- */
/* -------------------------- */

.lightbox-article-section {
  border-top: 1px solid var(--color-border-subtle);
  padding-top: var(--space-md);
  width: 100%;
}

.lb-article-title {
  margin-top: var(--space-sm);
  font-size: var(--type-simple-h3-size);
  line-height: var(--type-simple-h3-line-height);
}
.lb-article-tag-line {
  margin-top: var(--space-sm);
  font-size: var(--type-simple-h4-size);
  line-height: var(--type-simple-h4-line-height);
}

.lb-article-para {
  margin-top: var(--space-sm);
}

/* PAINTING-SERIES- ARTICLE */
/* -------------------------- */
/* -------------------------- */
.lb-article-painting-series {
}

.lb-paintings-series-article-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  justify-content: space-between;
  column-gap: var(--space-xl);
  row-gap: var(--space-lg);
  margin-top: var(--space-lg);
}

@media (max-width: 810px) {
  .lb-paintings-series-article-grid {
    grid-template-columns: repeat(2, 1fr);

    column-gap: var(--space-lg);
    row-gap: var(--space-md);
  }
}


.lb-paintings-series-article-grid-item {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
}
.lb-paintings-series-article-grid-item-title {
  font-family: var(--font-raleway);
  font-weight: 300;
  font-size: var(--type-simple-p-small-size);
  color: var(--color-caption);
}
.lb-paintings-series-article-grid-img-container {
  overflow: hidden;
  background-color: var(--color-page-bg);
}

.lb-paintings-series-article-grid-img-container img {
  width: 100%;
  aspect-ratio: 9/12;
  object-fit: cover;
  transition: opacity 0.4s ease;
}

.lb-paintings-series-article-grid-img-container img:hover {
  opacity: 80%;
}

/* ------------------------- */
/* ------------------------- */
/* ------------------------- */
.lb-article-portraits {
}

.lb-portraits-article-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  justify-content: space-between;
  column-gap: var(--space-xl);
  row-gap: var(--space-lg);
  margin-top: var(--space-lg);
}

@media (max-width: 810px) {
  .lb-portraits-article-grid {
    grid-template-columns: repeat(2, 1fr);

    column-gap: var(--space-lg);
    row-gap: var(--space-md);
  }
}


.lb-portraits-article-grid-item {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
}
.lb-portraits-article-grid-item-title {
  font-family: var(--font-raleway);
  font-weight: 300;
  font-size: var(--type-simple-p-small-size);
  color: var(--color-caption);
}
.lb-portraits-article-grid-img-container {
  overflow: hidden;
  background-color: var(--color-page-bg);
}

.lb-portraits-article-grid-img-container img {
  width: 100%;
  aspect-ratio: 6/7;
  object-fit: cover;
  transition: opacity 0.4s ease;
}

.lb-portraits-article-grid-img-container img:hover {
  opacity: 80%;
}

/* ── Digital Art article grid ── */
/* ------------------------------ */
/* ------------------------------ */
.lb-article-digital-art {
}

.lb-digital-art-article-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  justify-content: space-between;
  column-gap: var(--space-xl);
  row-gap: var(--space-lg);
  margin-top: var(--space-lg);
}

@media (max-width: 810px) {
  .lb-digital-art-article-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-lg);
    row-gap: var(--space-md);
  }
}

.lb-digital-art-article-grid-item {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
}

.lb-digital-art-article-grid-item-title {
  font-family: var(--font-raleway);
  font-weight: 300;
  font-size: var(--type-simple-p-small-size);
  color: var(--color-caption);
}

.lb-digital-art-article-grid-img-container {
  overflow: hidden;
  background-color: var(--color-page-bg);
}

.lb-digital-art-article-grid-img-container img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: opacity 0.4s ease;
}

.lb-digital-art-article-grid-img-container img:hover {
  opacity: 80%;
}

/* ── Collaborations article grid ── */
/* ---------------------------------- */
/* ---------------------------------- */
.lb-article-collaborations {
}

.lb-collaborations-article-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  justify-content: space-between;
  column-gap: var(--space-xl);
  row-gap: var(--space-lg);
  margin-top: var(--space-lg);
}

@media (max-width: 810px) {
  .lb-collaborations-article-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-lg);
    row-gap: var(--space-md);
  }
}

.lb-collaborations-article-grid-item {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
}

.lb-collaborations-article-grid-item-title {
  font-family: var(--font-raleway);
  font-weight: 300;
  font-size: var(--type-simple-p-small-size);
  color: var(--color-caption);
}

.lb-collaborations-article-grid-img-container {
  overflow: hidden;
  background-color: var(--color-page-bg);
}

.lb-collaborations-article-grid-img-container img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: opacity 0.4s ease;
}

.lb-collaborations-article-grid-img-container img:hover {
  opacity: 80%;
}

/* ── Drawings article grid ── */
/* --------------------------- */
/* --------------------------- */
.lb-article-drawings {
}

.lb-drawings-article-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  justify-content: space-between;
  column-gap: var(--space-xl);
  row-gap: var(--space-lg);
  margin-top: var(--space-lg);
}

@media (max-width: 810px) {
  .lb-drawings-article-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-lg);
    row-gap: var(--space-md);
  }
}

.lb-drawings-article-grid-item {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
}

.lb-drawings-article-grid-item-title {
  font-family: var(--font-raleway);
  font-weight: 300;
  font-size: var(--type-simple-p-small-size);
  color: var(--color-caption);
}

.lb-drawings-article-grid-img-container {
  overflow: hidden;
  background-color: var(--color-page-bg);
}

.lb-drawings-article-grid-img-container img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: opacity 0.4s ease;
}

.lb-drawings-article-grid-img-container img:hover {
  opacity: 80%;
}

/* ── Lightbox: carousel ≤1024px / stage grid >1024px ── */
@media (max-width: 1024px) {
  .spa-lightbox-section {
    padding-top: var(--space-xl);
  }
  .spa-lb-stage {
    display: none;
  }
  .spa-lightbox-section {
    overflow: hidden;
  }
  .spa-lb-carousel {
    display: flex;
    height: 100%;
  }
  .spa-lb-track {
    height: 100%;
  }
  .spa-lb-slide-img {
    max-height: calc(100dvh - var(--site-header-height-narrow-vpw) - 2.5rem);
  }
}

@media (min-width: 1025px) {
  .spa-lb-carousel {
    display: none;
  }
  .spa-lb-stage {
    display: grid;
  }
}

/* ── portraits-series section ── */
/* ── portraits-series section ── */
/* ── portraits-series section ── */

.portraits-series-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  justify-content: space-between;
  column-gap: var(--space-xl);
  row-gap: var(--space-lg);
  margin-top: var(--space-lg);
}

@media (max-width: 810px) {
  .portraits-series-grid {
    grid-template-columns: repeat(2, 1fr);

    column-gap: var(--space-lg);
    row-gap: var(--space-md);
  }
}

.portraits-series-grid-item {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
}
.portraits-series-grid-item-title {
  font-family: var(--font-raleway);
  font-weight: 300;
  font-size: var(--type-simple-p-small-size);
  color: var(--color-caption);
}
.portraits-series-grid-img-container {
  overflow: hidden;
  background-color: var(--color-page-bg);
}

.portraits-series-grid-img-container img {
  width: 100%;
  aspect-ratio: 6/7;
  object-fit: cover;
  transition: opacity 0.4s ease;
}

.portraits-series-grid-img-container img:hover {
  opacity: 80%;
}

.portraits-series-grid-item__btn {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.portraits-series-grid-item__btn:hover .portraits-series-grid-img-container img {
  opacity: 0.8;
}

/* ── Footer ── */
.nav-overlay__footer {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  height: 60px;
  min-height: 60px;
  margin: 0rem var(--space-lg) var(--space-sm) var(--space-lg);

  border-top: 1px solid var(--color-border-subtle);
}

.nav-overlay__meta {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.nav-overlay__meta .nav-overlay__artist {
  font-size: var(--text-xs);
}

.nav-overlay__meta .nav-overlay__artist-type {
  font-size: 0.7rem;
}
/*  */

/* ── Exhibitions section ── */
/* ------------------ */
/* ------------------ */
/* ------------------ */
.exhibitions-list {
  width: 100%;
  min-height: 200px;
}

exhibitions-list-item-component {
  padding-bottom: var(--space-sm);
  cursor: default;
}

/* ── Contact section ── */
/* ------------------ */
/* ------------------ */
/* ------------------ */
.spa-contact-statement {
  font-size: var(--type-simple-h3-size);
  font-weight: 600;
  max-width: 85ch;
}
.spa-contact-phone,
.spa-contact-email,
.spa-contact-email__label,
.spa-social-links {
  font-size: var(--type-simple-h3-size);
  font-weight: 600;
}
.spa-contact-phone a,
.spa-contact-email a,
.spa-social-links li a {
  font-size: var(--type-simple-h3-size);
  font-weight: 600;
  text-decoration: none;
  color: var(--color-text-primary);
}

/* COLLABORATIONS  PAGE-LAYOUT-SECTION */
/* -------------------------- */
/* -------------------------- */
.spa-page-layout-section {
}
.page-layout-media-section {
}
.page-layout-figure {
  display: grid;
  /* auto-fit: empty tracks collapse → 1 item fills its column, many share the row */
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
 
}
/* Single image: override grid with flex, align to start */
.page-layout-figure:has(.page-layout-img-item:only-child) {
  display: flex;
  justify-content: center;
}
/* Each injected item: grid so picture stacks above caption */
.page-layout-img-item {
  display: grid;
  grid-template-rows: 1fr auto;
  background-color: var(--color-page-bg);
}
/* Single item: shrink-wrap to the image's natural width */
.page-layout-figure .page-layout-img-item:only-child {
  width: fit-content;
}
/* picture fills its row */
.page-layout-img-item picture {
  display: block;
}
/* Multiple images: uniform cell height, cover-crop */
.page-layout-figure:not(:has(.page-layout-img-item:only-child)) .page-layout-img-item picture {
  aspect-ratio: 4/3;
}
.page-layout-figure:not(:has(.page-layout-img-item:only-child)) img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Single image: natural dimensions, letterboxed */
.page-layout-figure:has(.page-layout-img-item:only-child) img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 500px;
  object-fit: contain;
}
/* Caption label — bottom-left of each image */
.page-layout-img-caption {
  font-family: var(--font-raleway);
  font-weight: 300;
  font-size: var(--type-simple-p-small-size);
  line-height: var(--type-simple-p-small-line-height);
  color: var(--color-caption);
  padding: var(--space-xs) 0;
}
.page-layout-title {
  margin-top: var(--space-lg);
}
.page-layout-tagline {
  margin: var(--space-sm) 0rem;
}
/* -------------------------- */
/* VIDEO PLAYER SECTION -------------------------- */
.spa-video-section {
   margin-top: var(--space-lg);
  /* inherits padding-bottom from .spa-section */
}

.spa-video-player-wrapper {
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
}

/* Responsive 16/9 container — works in all modern browsers */
.spa-video-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #000;
  border-radius: var(--radius-sm, 4px);
  overflow: hidden;
}

/* Fallback for browsers without aspect-ratio (pre-2021 Chromium builds) */
@supports not (aspect-ratio: 16 / 9) {
  .spa-video-container {
    padding-top: 56.25%; /* 9/16 × 100 */
    height: 0;
  }
  .spa-video {
    position: absolute;
    inset: 0;
  }
}

.spa-video {
  display: block;
  margin: 0rem auto;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Ensure native controls are always keyboard-accessible */
  outline-offset: 2px;
}

.spa-video:focus-visible {
  outline: 2px solid var(--color-text-primary);
}

.spa-video-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs, 0.5rem);
  font-size: var(--type-simple-p-size);
  color: var(--gray-400);
  padding: var(--space-md);
  text-align: center;
}

.spa-video-fallback-link {
  color: var(--color-text-primary);
}

.spa-video-title {
  margin-top: var(--space-md);
  font-size: var(--type-simple-h3-size);
  line-height: var(--type-simple-h3-line-height);
}
.spa-video-tagline {
  margin-top: var(--space-md);
  font-size: var(--type-simple-h4-size);
  line-height: var(--type-simple-h4-line-height);
}

.spa-video-description {
  margin-top: var(--space-sm);
  font-size: var(--type-simple-p-size);
  line-height: var(--type-simple-p-line-height);
  color: var(--gray-600);
}

@media (max-width: 600px) {
  .spa-video-player-wrapper {
    max-width: 100%;
  }
}

.site-footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  align-items: center;

  font-size: var(--type-simple-p-small-size);
  padding: var(--space-md) 0rem;
  /* padding-bottom: 6rem; */
  border-top: 1px solid var(--gray-200);
  height: var(--site-footer-height);
}

.subscribe-form {
  grid-row: 1/2;
  grid-column: 1/2;

  justify-self: self-start;
  align-self: flex-start;
  border: 1px solid var(--color-border-subtle);
  font-size: var(--type-simple-p-small-size);
}
.site-footer-form{
  height: 100px;
}
#subscribe-email {
  border-right: 1px solid var(--color-border-subtle);
}
form input {
  height: 100%;
  min-width: 150px;
  padding: var(--space-sm);
  font-size: var(--type-simple-p-small-size);
}
form input:hover {
  background-color: var(--gray-100);
  color: #999;
}
form button {
  padding: 0rem var(--space-sm);
  height: 100%;
  width: 90px;
  font-size: var(--type-simple-p-small-size);
  cursor: pointer;
}
form button:hover {
  color: #999;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Subscribe modal (fullscreen, centered) */
.subscribe-modal {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: var(--space-md);
  border: 0;
  overflow-y: auto;
  color: var(--color-text-primary);
 

}
.subscribe-modal[open] {
  display: grid;
  place-items: center;
}
.subscribe-modal__content {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.subscribe-modal__title {
  font-size: var(--type-simple-h2-size);
  line-height: var(--type-simple-h2-line-height);
  color: orangered;
}
.subscribe-modal .site-footer-form {
  display: block;
  height: auto;
}
.subscribe-modal .subscribe-form {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}
.subscribe-modal .subscribe-form input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-border-subtle);
}
.subscribe-modal .subscribe-form #subscribe-email {
  border-right: 0;
}
.subscribe-modal .subscribe-form button {
  width: 50%;
  align-self: flex-start;
  margin-top: var(--space-md);
  box-sizing: border-box;
  padding: var(--space-sm);
  color: #fff;
  background-color: #000;
}
.subscribe-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Toast (popover, so it sits above the open modal dialog) */
.toast {
  position: fixed;
  inset: auto auto var(--space-lg) 50%;
  transform: translateX(-50%);
  margin: 0;
  max-width: min(90vw, 420px);
  padding: var(--space-sm) var(--space-md);
  border: 0;
  background-color: #000;
  color: #fff;
  font-size: var(--type-simple-p-small-size);
  text-align: center;
}
.toast[data-type="error"] {
  background-color: orangered;
}

.subscribe-modal__close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  display: inline-flex;
  padding: var(--space-xs);
  color: var(--gray-400);
  cursor: pointer;
}
.subscribe-modal__close:hover {
  color: var(--gray-700);
}
.subscribe-modal::backdrop {
  background-color: var(--color-page-bg);
}
.social-link {
  grid-row: 1/2;
  grid-column: 1/2;
  display: flex;
  gap: 0.6em;
  justify-self: flex-start;
  align-self: center;
  padding-top: 0.65rem;
}

.social-link a {
  color: #222;
  text-decoration: none;
  display: inline-flex;
}
.social-link__icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--gray-400);
  
}

.social-link__icon:hover {
  color: var(--gray-700);

}
.social-link a:hover {
  color: var(--gray-500);
}
.social-link__subscribe {
  
  font-size: 0.75rem;
  font-weight: bold;
  margin-right: 1rem;
  /* text-transform: uppercase; */
  color: var(--gray-400);
  cursor: pointer;
}
.social-link__subscribe:hover {
  color: var(--gray-500);
}
.legal {
  grid-row: 1/2;
  grid-column: 3/4;
  justify-self: self-end;
  align-self: center;
  padding-top: 0.65rem;
}

@media (max-width: 800px) {
  .lb-back-button {
    display: flex;
  }
  .site-footer {
    grid-template-columns: 4fr 1fr;
    grid-template-rows: repeat(2, auto);
    row-gap: var(--space-md);
  }

  .social-link {
  grid-row: 1/2;
  grid-column: 4/5;
  display: flex;
  gap: 0.6em;
  justify-self: flex-start;
  align-self: center;
  padding-top: 0.65rem;
}

  .legal {
    grid-row: 2/3;
    grid-column: 1/-1;
    justify-self: self-start;
  }
}
/*  */

@media (max-width: 900px) {
  .site-header {
    height: var(--site-header-height-narrow-vpw);
  }
  .site-header-menu {
    display: none;
  }
  .nav-toggle {
    display: flex;
  }
}

@media (min-width: 900px) {
  .site-header-menu-overlay-bk-btn {
    display: none !important;
  }
}

@media (max-width: 900px) {
  body.lightbox-active .site-header-menu-overlay-bk-btn {
    display: flex;
  }
  body.lightbox-active .back-btn-wrapper {
    display: flex;
    opacity: 1;
    pointer-events: auto;
  }
}
/* ============================================================
   VIEW TRANSITION API
   MDN: https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API
   ============================================================

   HOW IT WORKS (same-document / SPA)
   ─────────────────────────────────────────────────────────────
   In view-trans-spa.js, every SPA view change is now wrapped in:

     document.startViewTransition(() => applyView(viewName))

   That one JS call gives the browser everything it needs. The browser:
     1. Snapshots the CURRENT page state  →  ::view-transition-old(*)
     2. Runs the callback (hides/shows sections, updates heading text)
     3. Snapshots the NEW page state      →  ::view-transition-new(*)
     4. Places both snapshots in a fullscreen overlay and plays the
        animations declared below
     5. Removes the overlay; the live DOM takes over

   Without any CSS overrides you already get a smooth cross-fade
   between views. Everything below replaces / augments that default.


   THE PSEUDO-ELEMENT TREE
   ─────────────────────────────────────────────────────────────
   The browser builds this virtual tree during every transition:

     ::view-transition                         ← fullscreen overlay
     └─ ::view-transition-group(root)          ← one group per named element
        └─ ::view-transition-image-pair(root)
           ├─ ::view-transition-old(root)      ← static screenshot of old state
           └─ ::view-transition-new(root)      ← live new DOM

   Every element with  view-transition-name: <name>  gets its OWN group:

     └─ ::view-transition-group(spa-main)
        └─ ::view-transition-image-pair(spa-main)
           ├─ ::view-transition-old(spa-main)
           └─ ::view-transition-new(spa-main)

   This lets you style each named element's in/out animation independently.

   RULES TO REMEMBER
   ─────────────────────────────────────────────────────────────
   • view-transition-name values must be UNIQUE in the DOM at any moment.
     Two elements with the same name → the transition is skipped entirely.
   • Use  view-transition-name: none  to opt an element OUT.
   • Always supply a @media (prefers-reduced-motion) fallback (see Step 4).
   ============================================================ */

/* ----------------------------------------------------------
   STEP 1 — Assign view-transition-name to elements
   ----------------------------------------------------------
   By default the browser captures the entire page as a single
   "root" snapshot.  Giving an element its own name carves it out
   into a separate snapshot group that you can animate independently.

   Here we name the whole <main> content block so the header and
   footer (which don't change between views) stay perfectly still
   while only the content area slides.

   Elements with their own name are "carved out" of the root snapshot
   and placed in their own group, where we can set animation: none
   to keep them completely still.
   ---------------------------------------------------------- */

.spa-main {
  view-transition-name: spa-main;
}

/* Give the header its own snapshot group so we have explicit control.
   Without this it lives inside root, which gets the browser's default
   cross-fade. Naming it lets us set animation: none below. */
.site-header-outer {
  view-transition-name: site-header;
}

/* ----------------------------------------------------------
   STEP 2 — Define @keyframes for the transition animations
   ----------------------------------------------------------
   Keep keyframe names prefixed (e.g. vt-*) so they don't clash
   with other animation names in the project.
   ---------------------------------------------------------- */

/* Old view fades out — no movement, stays in place */
@keyframes vt-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* New view fades in — no movement, stays in place */
@keyframes vt-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Optional alternatives kept for reference — swap into STEP 3 to try them */

/* ----------------------------------------------------------
   STEP 3 — Apply animations to the pseudo-elements
   ----------------------------------------------------------
   ::view-transition-old(name)   → the LEAVING (outgoing) snapshot
   ::view-transition-new(name)   → the ENTERING (incoming) snapshot

   ::view-transition-group(name) → parent of both old + new.
     Set animation-duration / animation-timing-function here and
     both old and new inherit them, keeping timing in sync.
   ---------------------------------------------------------- */

::view-transition-old(spa-main) {
  /* Fade out over 0.2s */
  animation: 0.6s ease-in both vt-fade-out;
}

::view-transition-new(spa-main) {
  /* Fade in over 0.2s, but DELAYED by 0.2s so it starts after the
     old view has fully disappeared. The  both  fill-mode keeps it
     invisible (opacity: 0) during that delay period. */
  animation: 0.6s 0.6s ease-out both vt-fade-in;
}

/* Uncomment to also animate the heading (requires STEP 1 heading name): */
/*
::view-transition-old(spa-heading) {
  animation: 0.2s ease-in both vt-slide-out-up;
}

::view-transition-new(spa-heading) {
  animation: 0.2s ease-out both vt-slide-in-up;
}
*/

/* Header — no animation: stays completely still during every transition */
::view-transition-old(site-header),
::view-transition-new(site-header) {
  animation: none;
}

/* Root snapshot now contains only the footer and page background.
   Neither changes between views, so disable its animation too so
   nothing outside spa-main moves or flickers. */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}

/* ----------------------------------------------------------
   STEP 4 — Accessibility: prefers-reduced-motion  (always add this)
   ----------------------------------------------------------
   Some users have vestibular disorders or are sensitive to motion.
   The OS-level "reduce motion" setting maps to this media query.
   Inside it we either shorten the duration to near-zero (keeps a
   barely-perceptible fade) or disable animations entirely.
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  /* Replace the slide with an instant opacity swap */
  ::view-transition-old(spa-main),
  ::view-transition-new(spa-main) {
    animation: none;
  }

  /* Collapse the default root crossfade too */
  ::view-transition-group(root) {
    animation-duration: 0.01s;
  }
}

a.temp-subs-button {
  padding: 0rem var(--space-sm);
  height: 100%;
  width: 90px;
  font-size: var(--type-simple-p-small-size);
  cursor: pointer;
  text-decoration: none;
}

/* Phones in landscape: cover the site with a "rotate your device" notice */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  html {
    overflow: hidden;
  }
  body::before {
    content: "Please rotate your device to portrait";
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
    text-align: center;
    font-family: var(--font-raleway);
    font-size: var(--type-simple-h3-size);
    color: var(--color-text-primary);
    background-color: var(--color-page-bg);
  }
}