.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.paper-texture {
  background-image: url("https://www.transparenttextures.com/patterns/natural-paper.png");
}

.squish:active {
  transform: scale(0.95);
  transition: transform 0.1s ease;
}

/* Artists grid (homepage) — even brick mosaic with tall + square tiles */
.artists-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 9rem;
  grid-auto-flow: dense;
  gap: 1rem;
}
@media (min-width: 768px) {
  .artists-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 9.5rem; gap: 1.5rem; }
}
@media (min-width: 1024px) { .artists-grid { grid-auto-rows: 11.5rem; } }
.artists-tile {
  position: relative;
  height: 100%;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(20, 36, 80, 0.08);
}
.artists-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tile-tall { grid-row: span 2; }
.artists-tile__name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.9rem 1rem;
  color: #ffffff;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 600;
  font-size: 17px;
  background: linear-gradient(to top, rgba(20, 36, 80, 0.85), rgba(20, 36, 80, 0));
}

/* Artwork masonry (artist page) — uneven bricks by natural ratio */
.works-masonry { columns: 1; column-gap: 24px; }
@media (min-width: 640px) { .works-masonry { columns: 2; } }
@media (min-width: 1024px) { .works-masonry { columns: 3; } }
.work-item {
  margin-bottom: 24px;
  border-radius: 1rem;
  overflow: hidden;
  break-inside: avoid;
  box-shadow: 0 10px 25px rgba(20, 36, 80, 0.08);
  background: #edeeef;
}
.work-item img { display: block; width: 100%; height: auto; }

/* "See all" tile with a starry night backdrop */
.artists-cta {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.6rem;
  padding: 1.25rem;
  background: linear-gradient(135deg, #2b3a67 0%, #142450 55%, #4e5d8c 100%);
  color: #ffffff;
}
.artists-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 18% 28%, rgba(255,255,255,.6), transparent),
    radial-gradient(2px 2px at 72% 62%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.5px 1.5px at 42% 82%, rgba(255,255,255,.5), transparent),
    radial-gradient(2px 2px at 85% 22%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 30% 55%, rgba(255,255,255,.4), transparent);
  pointer-events: none;
}
.artists-cta > * { position: relative; z-index: 1; }
.artists-cta__icon {
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}
.artists-cta__icon .material-symbols-outlined { color: #dbe1ff; font-size: 28px; }
.artists-cta__text { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 18px; line-height: 1.2; }
.artists-cta__arrow { color: #b6c5fb; transition: transform 0.3s; }
.artists-cta:hover .artists-cta__arrow { transform: translateX(4px); }

/* Contact + share buttons */
.contact-btn {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background: #e7e8e9;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  cursor: pointer;
}
.contact-btn:hover { background: #dde0e3; }

.share-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border-radius: 9999px;
  background: #e7e8e9;
  color: #142450;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}
.share-item:hover { background: #dde0e3; }

.share-dropdown {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem;
  background: #ffffff;
  border: 1px solid #e1e3e4;
  border-radius: 0.75rem;
  box-shadow: 0 12px 28px rgba(20, 36, 80, 0.15);
  min-width: 12rem;
  z-index: 40;
}
.share-dropdown .share-item { background: transparent; justify-content: flex-start; }
.share-dropdown .share-item:hover { background: #f3f4f5; }

/* Story text on a background backdrop */
.story-bg {
  background-size: cover;
  background-position: center;
  border-radius: 1.5rem;
  padding: 2rem 1.25rem;
  box-shadow: 0 24px 60px rgba(20, 36, 80, 0.16);
  overflow: hidden;
}
@media (min-width: 768px) {
  .story-bg { padding: 4.5rem 3.5rem; }
}
.story-panel {
  max-width: 620px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 1rem;
  padding: 1.5rem 1.35rem;
  box-shadow: 0 24px 60px rgba(20, 36, 80, 0.22);
}
@media (min-width: 768px) {
  .story-panel { padding: 2.5rem 2.75rem; }
}

/* Modal dialogs */
.story-dialog {
  width: min(96vw, 640px);
  max-height: 92vh;
  padding: 0;
  border: none;
  border-radius: 1rem;
  background: #ffffff;
  color: #191c1d;
  overflow: hidden;
}
.story-dialog::backdrop {
  background: rgba(20, 36, 80, 0.45);
  backdrop-filter: blur(4px);
}
.story-dialog__inner {
  position: relative;
  padding: 1.5rem 1.25rem;
  max-height: 92vh;
  overflow-y: auto;
}
@media (min-width: 768px) {
  .story-dialog__inner { padding: 3rem; }
}
.story-dialog__close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  color: #45464f;
  background: #f3f4f5;
  cursor: pointer;
  transition: background 0.2s;
}
.story-dialog__close:hover { background: #e1e3e4; }
.story-input {
  width: 100%;
  border: 1px solid #c5c6d0;
  background: #ffffff;
  border-radius: 0.5rem;
  padding: 0.6rem 0.85rem;
}
.story-input:focus {
  outline: none;
  border-color: #142450;
  box-shadow: 0 0 0 2px rgba(20, 36, 80, 0.15);
}

/* Stories catalog filter */
.story-filter { cursor: pointer; }
/* active state — double class beats Tailwind's single-class text utility */
.story-filter.story-filter--active,
.story-filter.story-filter--active:hover {
  background: #142450 !important;
  color: #ffffff !important;
  border-color: #142450 !important;
}

.sketch-overlay {
  -webkit-mask-image: linear-gradient(to right, black 50%, transparent 100%);
  mask-image: linear-gradient(to right, black 50%, transparent 100%);
}
.hero-zoom {
  animation: slow-zoom 20s infinite alternate linear;
}
@keyframes slow-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}

/* Hero main illustration — faint backdrop behind the heading, as in the design */
.hero-illustration {
  opacity: 0.15;
  animation: slow-zoom 24s infinite alternate linear;
}
@media (min-width: 768px) {
  .hero-illustration { opacity: 0.18; }
}

/* Particle system */
.stars-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.star {
  position: absolute;
  background: #4e5d8c;
  border-radius: 50%;
  opacity: 0.3;
  animation: star-drift linear infinite, star-pulse ease-in-out infinite alternate;
}
@keyframes star-drift {
  from { transform: translate(0, 0); }
  to { transform: translate(100px, -100px); }
}
@keyframes star-pulse {
  from { opacity: 0.1; scale: 0.8; }
  to { opacity: 0.6; scale: 1.2; }
}