:root {
  color-scheme: light;
  --background: #e9eee8;
  --foreground: #0a0b09;
  --foreground-soft: rgba(10, 11, 9, 0.72);
  --muted: rgba(10, 11, 9, 0.38);
  --tile-border: rgba(10, 11, 9, 0.1);
  --card-background: #11110f;
  --card-background-pale: #e2dccd;
  --accent: #8e6d4d;
  --green: #6c776b;
  --max-width: 1680px;
  --spacing: clamp(0.8rem, 1.7vw, 1.8rem);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration: 520ms;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  background: var(--background);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--background);
  color: var(--foreground);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

button {
  font: inherit;
}

.gallery-scroll {
  position: fixed;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(10, 11, 9, 0.3) rgba(10, 11, 9, 0.05);
  background:
    linear-gradient(90deg, rgba(10, 11, 9, 0.045) 1px, transparent 1px),
    radial-gradient(circle at 7% 10%, rgba(142, 109, 77, 0.12), transparent 24rem),
    radial-gradient(circle at 87% 32%, rgba(108, 119, 107, 0.16), transparent 32rem),
    var(--background);
  background-size: clamp(6rem, 11vw, 10rem) 100%, auto, auto, auto;
}

.gallery-scroll::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0.08;
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0 1px, transparent 1px 3px),
    radial-gradient(circle, rgba(255, 255, 255, 0.28) 0 1px, transparent 1px 3px);
  background-size: 7px 7px, 13px 13px;
  mix-blend-mode: overlay;
}

.loop-track {
  width: min(var(--max-width), calc(100vw - (var(--spacing) * 2)));
  margin: 0 auto;
  padding: clamp(5.5rem, 13vh, 9rem) 0 var(--spacing);
}

.loop-set {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: clamp(5.4rem, 7.4vw, 8.6rem);
  grid-auto-flow: dense;
  gap: var(--spacing);
  padding: calc(var(--spacing) * 0.5) 0;
}

.quote-tile {
  --tile-bg: #f1f3ee;
  --tile-fg: #f6f2e8;
  --tile-muted: rgba(246, 242, 232, 0.56);
  --tile-filter: none;
  --tile-radius: 0;
  --tile-overlay: linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.18) 44%, rgba(0, 0, 0, 0.76));
  --quote-size: clamp(1.05rem, 1.42vw, 1.72rem);
  --quote-width: 82%;
  --image-scale: 1.015;
  --image-position: 50% 50%;
  --parallax-y: 0px;
  position: relative;
  display: block;
  grid-column: span 4;
  grid-row: span 4;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--tile-border);
  border-radius: var(--tile-radius);
  padding: 0;
  overflow: hidden;
  background: var(--tile-bg);
  color: var(--tile-fg);
  cursor: pointer;
  text-align: left;
  opacity: 0.001;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity var(--duration) var(--ease),
    transform var(--duration) var(--ease),
    border-color 240ms ease,
    box-shadow 240ms ease;
}

.quote-tile.is-visible {
  opacity: 1;
  transform: translate3d(0, var(--parallax-y), 0);
}

.quote-tile:hover,
.quote-tile:focus-visible,
.quote-tile.is-active {
  border-color: rgba(10, 11, 9, 0.28);
  box-shadow: 0 30px 90px rgba(10, 11, 9, 0.18);
}

.quote-tile:focus-visible {
  outline: 2px solid rgba(10, 11, 9, 0.8);
  outline-offset: 4px;
}

.quote-tile:hover .tile-image,
.quote-tile:focus-visible .tile-image,
.quote-tile.is-active .tile-image {
  transform: scale(calc(var(--image-scale) + 0.032));
}

.quote-tile:hover .tile-surface,
.quote-tile:focus-visible .tile-surface,
.quote-tile.is-active .tile-surface {
  opacity: 1;
}

.size-large {
  grid-column: span 6;
  grid-row: span 5;
}

.size-wide {
  grid-column: span 8;
  grid-row: span 4;
}

.size-tall {
  grid-column: span 4;
  grid-row: span 6;
}

.size-narrow {
  grid-column: span 3;
  grid-row: span 5;
}

.size-square {
  grid-column: span 4;
  grid-row: span 4;
}

.size-medium {
  grid-column: span 4;
  grid-row: span 4;
}

.tile-media,
.tile-image,
.image-missing,
.tile-media::before,
.tile-media::after {
  position: absolute;
  inset: 0;
}

.tile-media {
  display: block;
  overflow: hidden;
}

.tile-media::before,
.tile-media::after {
  content: "";
  z-index: 2;
  pointer-events: none;
}

.tile-media::before {
  background: var(--tile-overlay);
}

.tile-media::after {
  opacity: var(--texture-opacity, 0);
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.18) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.26) 0 1px, transparent 1px 11px);
  mix-blend-mode: overlay;
}

.tile-image {
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--image-position);
  filter: var(--tile-filter);
  transform: scale(var(--image-scale));
  transition: transform 900ms var(--ease), filter 360ms ease;
}

.image-missing {
  z-index: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  color: var(--tile-muted);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
  background:
    linear-gradient(135deg, rgba(10, 11, 9, 0.06), transparent),
    #d9ded7;
}

.quote-tile.is-missing .tile-image {
  display: none;
}

.tile-surface {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  align-content: end;
  gap: 0.85rem;
  padding: clamp(1rem, 2vw, 2rem);
  opacity: 0.9;
  transition: opacity 260ms ease;
}

.tile-index {
  color: var(--tile-muted);
  font-size: clamp(0.66rem, 0.72vw, 0.8rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.15em;
}

.tile-quote {
  width: min(var(--quote-width), 100%);
  color: var(--tile-fg);
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--quote-size);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: 0;
  text-wrap: balance;
}

.tile-author {
  color: var(--tile-muted);
  font-size: clamp(0.72rem, 0.8vw, 0.88rem);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.variant-grayscale-editorial {
  --tile-filter: grayscale(1) contrast(1.1);
  --tile-overlay: linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.68));
}

.variant-high-contrast-bw {
  --tile-filter: grayscale(1) contrast(1.65) brightness(0.9);
  --quote-size: clamp(1.4rem, 2.1vw, 2.45rem);
}

.variant-warm-sepia {
  --tile-filter: sepia(0.78) saturate(0.9) contrast(1.04);
  --tile-overlay: linear-gradient(180deg, rgba(42, 25, 15, 0.12), rgba(42, 25, 15, 0.78));
}

.variant-cool-cyan-duotone {
  --tile-filter: grayscale(1) contrast(1.2) sepia(0.28) hue-rotate(145deg) saturate(1.5);
  --accent: #86b4aa;
}

.variant-red-monochrome {
  --tile-filter: grayscale(1) sepia(0.7) hue-rotate(318deg) saturate(1.6) contrast(1.1);
  --tile-overlay: linear-gradient(180deg, rgba(115, 28, 24, 0.14), rgba(0, 0, 0, 0.82));
}

.variant-soft-matte-film {
  --tile-filter: saturate(0.82) contrast(0.88) brightness(1.05);
  --tile-overlay: linear-gradient(180deg, rgba(229, 214, 188, 0.15), rgba(25, 24, 21, 0.72));
}

.variant-hard-flash {
  --tile-filter: contrast(1.35) brightness(1.16) saturate(1.2);
  --tile-overlay: radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.12), transparent 36%), linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.74));
}

.variant-face-close {
  --image-scale: 1.82;
  --image-position: 42% 24%;
  --tile-filter: contrast(1.12) saturate(0.92);
}

.variant-scenic-wide {
  --image-position: 50% 18%;
  --tile-filter: saturate(0.72) contrast(1.08);
  --quote-width: 64%;
}

.variant-poster-shadow {
  --tile-filter: contrast(1.5) saturate(0.72);
  --tile-overlay: linear-gradient(90deg, rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.18) 58%, rgba(0, 0, 0, 0.68));
}

.variant-newspaper-grain {
  --tile-filter: grayscale(1) contrast(1.24);
  --texture-opacity: 0.28;
  --tile-bg: #d8d0bd;
}

.variant-dark-gallery-frame {
  --tile-radius: 0;
  border-width: clamp(0.55rem, 0.85vw, 0.85rem);
  --tile-filter: saturate(0.65) brightness(0.8);
}

.variant-pale-magazine {
  --tile-bg: var(--card-background-pale);
  --tile-fg: #171511;
  --tile-muted: rgba(23, 21, 17, 0.58);
  --tile-overlay: linear-gradient(180deg, rgba(221, 212, 195, 0.52), rgba(221, 212, 195, 0.78));
  --tile-filter: saturate(0.75) contrast(0.95);
}

.variant-vertical-strip {
  --image-position: 44% 24%;
  --tile-filter: grayscale(0.45) contrast(1.1);
}

.variant-square-crop {
  --image-position: 50% 28%;
  --tile-filter: saturate(1.14) contrast(1.08);
}

.variant-circle-mask .tile-media {
  inset: 8%;
  border-radius: 50%;
}

.variant-circle-mask {
  --tile-bg: #e5ded0;
  --tile-fg: #15130f;
  --tile-muted: rgba(21, 19, 15, 0.58);
}

.variant-rounded-rectangle {
  --tile-radius: 28px;
  --tile-filter: saturate(0.92) brightness(1.02);
}

.variant-hard-border {
  border: 2px solid rgba(243, 239, 230, 0.76);
  --tile-filter: contrast(1.08) saturate(0.82);
}

.variant-giant-quote {
  --quote-size: clamp(2.4rem, 5vw, 6.4rem);
  --quote-width: 94%;
  --tile-filter: brightness(0.55) grayscale(1);
}

.variant-side-rail .tile-surface {
  inset: 0 auto 0 0;
  width: min(15rem, 54%);
  background: rgba(5, 5, 5, 0.72);
}

.variant-blur-backdrop .tile-image {
  filter: blur(10px) saturate(1.15);
  transform: scale(1.14);
}

.variant-blur-backdrop .tile-media::after {
  opacity: 1;
  inset: 8%;
  background: url("./thispic.jpg") center / cover no-repeat;
  filter: saturate(0.85) contrast(1.04);
  mix-blend-mode: normal;
}

.variant-high-saturation {
  --tile-filter: saturate(1.85) contrast(1.06);
}

.variant-low-saturation {
  --tile-filter: saturate(0.28) contrast(1.03) brightness(1.03);
}

.variant-inverted-accent {
  --tile-filter: invert(0.9) hue-rotate(170deg) contrast(1.15);
  --tile-overlay: linear-gradient(180deg, rgba(238, 230, 210, 0.14), rgba(0, 0, 0, 0.74));
}

.variant-halftone-texture {
  --texture-opacity: 0.42;
  --tile-filter: grayscale(1) contrast(1.32);
}

.variant-diagonal-mask .tile-media {
  clip-path: polygon(0 0, 100% 9%, 88% 100%, 0 88%);
}

.variant-split-tone {
  --tile-filter: contrast(1.12) saturate(0.86);
}

.variant-split-tone .tile-media::after {
  opacity: 0.5;
  background: linear-gradient(90deg, rgba(135, 70, 45, 0.45), transparent 48%, rgba(87, 111, 103, 0.46));
  mix-blend-mode: color;
}

.variant-heavy-vignette {
  --tile-filter: brightness(0.82) contrast(1.08);
  --tile-overlay: radial-gradient(circle at 50% 36%, transparent 0 30%, rgba(0, 0, 0, 0.9) 82%);
}

.variant-white-card {
  --tile-bg: #ebe5d6;
  --tile-fg: #12110d;
  --tile-muted: rgba(18, 17, 13, 0.54);
  --tile-overlay: linear-gradient(180deg, rgba(235, 229, 214, 0.18), rgba(235, 229, 214, 0.78));
  padding: clamp(0.55rem, 0.9vw, 0.9rem);
}

.variant-black-card {
  --tile-bg: #030303;
  --tile-filter: brightness(0.7) contrast(1.18);
  border-color: rgba(255, 255, 255, 0.08);
  padding: clamp(0.7rem, 1vw, 1rem);
}

.variant-tiny-image-huge-quote {
  --tile-bg: #dfd7c7;
  --tile-fg: #111;
  --tile-muted: rgba(17, 17, 17, 0.55);
  --quote-size: clamp(2rem, 3.5vw, 4.2rem);
}

.variant-tiny-image-huge-quote .tile-media {
  inset: auto 1rem 1rem auto;
  width: min(14rem, 35%);
  height: 44%;
}

.variant-huge-image-tiny-quote {
  --quote-size: clamp(0.98rem, 1.1vw, 1.2rem);
  --quote-width: 52%;
  --tile-filter: saturate(0.92) contrast(1.1);
}

.variant-typography-first {
  --tile-bg: #d8d2c0;
  --tile-fg: #0f0f0d;
  --tile-muted: rgba(15, 15, 13, 0.52);
  --quote-size: clamp(2.1rem, 3.8vw, 4.9rem);
}

.variant-typography-first .tile-media {
  opacity: 0.22;
}

.variant-image-first {
  --quote-size: clamp(0.9rem, 0.96vw, 1.1rem);
  --quote-width: 58%;
  --tile-filter: contrast(1.14) saturate(1.08);
}

.variant-two-panel .tile-media {
  right: 50%;
}

.variant-two-panel .tile-surface {
  left: 50%;
  background: #ded6c6;
  color: #111;
}

.variant-two-panel {
  --tile-fg: #111;
  --tile-muted: rgba(17, 17, 17, 0.54);
}

.variant-modern-polaroid {
  --tile-bg: #e8e0d0;
  --tile-fg: #171410;
  --tile-muted: rgba(23, 20, 16, 0.56);
  padding: 0.8rem 0.8rem 3.4rem;
}

.variant-modern-polaroid .tile-media {
  inset: 0.8rem 0.8rem 4.8rem;
}

.variant-contact-sheet {
  --texture-opacity: 0.24;
  --tile-filter: sepia(0.28) saturate(0.6) contrast(1.18);
}

.variant-contact-sheet .tile-media::after {
  opacity: 0.42;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.18) 1px, transparent 1px);
  background-size: 33.33% 33.33%;
}

.variant-cinematic-wide {
  --tile-filter: contrast(1.18) brightness(0.82);
  --image-position: 50% 35%;
}

.variant-cinematic-wide::before,
.variant-cinematic-wide::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 4;
  height: 12%;
  background: #030303;
  pointer-events: none;
}

.variant-cinematic-wide::before {
  top: 0;
}

.variant-cinematic-wide::after {
  bottom: 0;
}

.variant-portrait-crop {
  --image-scale: 1.45;
  --image-position: 52% 18%;
  --tile-filter: saturate(0.82) contrast(1.12);
}

.variant-sidebar-label .tile-surface {
  border-left: 0.42rem solid var(--green);
  background: linear-gradient(90deg, rgba(5, 5, 5, 0.84), transparent 72%);
}

.variant-poster-frame {
  --tile-bg: #16120e;
  border: clamp(0.75rem, 1vw, 1.1rem) solid #d8d0bd;
}

.variant-muted-green {
  --tile-bg: #20251f;
  --tile-filter: grayscale(0.45) sepia(0.34) hue-rotate(58deg) saturate(0.86);
  --tile-overlay: linear-gradient(180deg, rgba(59, 75, 61, 0.18), rgba(8, 12, 8, 0.82));
}

.variant-monochrome-brown {
  --tile-filter: grayscale(1) sepia(0.85) contrast(1.18);
  --tile-overlay: linear-gradient(180deg, rgba(74, 48, 31, 0.12), rgba(18, 13, 9, 0.84));
}

.variant-deep-black-frame {
  --tile-bg: #000;
  --tile-filter: brightness(0.68) contrast(1.24);
  border: clamp(0.9rem, 1.4vw, 1.35rem) solid #000;
}

.variant-subtle-edge {
  box-shadow:
    inset 0 0 0 1px rgba(243, 239, 230, 0.1),
    0 0 34px rgba(206, 184, 148, 0.08);
}

.variant-brutalist-grid {
  --tile-radius: 0;
  --tile-filter: grayscale(1) contrast(1.36);
  border: 2px solid rgba(243, 239, 230, 0.68);
}

.variant-brutalist-grid .tile-media::after {
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.35) 1px, transparent 1px);
  background-size: 2.4rem 2.4rem;
}

.variant-museum-wall {
  --tile-bg: #e7dfcf;
  --tile-fg: #12100d;
  --tile-muted: rgba(18, 16, 13, 0.52);
  --tile-overlay: linear-gradient(180deg, rgba(231, 223, 207, 0.36), rgba(231, 223, 207, 0.82));
  padding: clamp(1rem, 1.5vw, 1.5rem);
}

.variant-high-fashion {
  --quote-size: clamp(2.05rem, 3vw, 3.6rem);
  --tile-filter: saturate(0.64) contrast(1.18) brightness(0.9);
  --tile-overlay: linear-gradient(90deg, rgba(0, 0, 0, 0.84), transparent 62%);
}

.variant-darkroom-print {
  --tile-filter: grayscale(1) contrast(1.45) brightness(0.74);
  --tile-overlay: radial-gradient(circle at 50% 46%, rgba(90, 17, 13, 0.12), rgba(0, 0, 0, 0.86));
}

.variant-final-premium {
  --tile-filter: saturate(0.78) contrast(1.05);
  --tile-overlay: linear-gradient(180deg, rgba(5, 5, 5, 0.04), rgba(5, 5, 5, 0.76));
  border-color: rgba(218, 205, 178, 0.28);
}

@media (max-width: 920px) {
  .loop-track {
    width: min(100% - 1.25rem, 900px);
  }

  .loop-set {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: clamp(4.9rem, 12vw, 7.4rem);
  }

  .quote-tile,
  .size-medium,
  .size-square,
  .size-narrow {
    grid-column: span 3;
    grid-row: span 4;
  }

  .size-large,
  .size-wide {
    grid-column: span 6;
    grid-row: span 4;
  }

  .size-tall {
    grid-column: span 3;
    grid-row: span 5;
  }
}

@media (max-width: 520px) {
  :root {
    --spacing: 0.8rem;
  }

  .loop-track {
    width: min(100% - 0.85rem, 460px);
  }

  .loop-set {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 0.85rem;
  }

  .quote-tile,
  .size-large,
  .size-wide,
  .size-tall,
  .size-narrow,
  .size-square,
  .size-medium {
    grid-column: 1;
    grid-row: auto;
    min-height: clamp(20rem, 88vw, 29rem);
  }

  .size-wide,
  .variant-cinematic-wide {
    min-height: clamp(18rem, 74vw, 24rem);
  }

  .tile-surface {
    padding: 1rem;
    opacity: 1;
  }

  .tile-quote {
    --quote-size: clamp(1.18rem, 7vw, 2rem);
    width: 92%;
  }

  .variant-two-panel .tile-media,
  .variant-two-panel .tile-surface {
    inset: 0;
    width: auto;
    left: 0;
    right: 0;
    background: transparent;
    color: inherit;
  }

  .variant-tiny-image-huge-quote .tile-media {
    inset: 0;
    width: auto;
    height: auto;
    opacity: 0.34;
  }

  .variant-side-rail .tile-surface {
    width: auto;
    background: linear-gradient(180deg, transparent 20%, rgba(5, 5, 5, 0.84));
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }

  .quote-tile,
  .quote-tile.is-visible,
  .tile-image,
  .quote-tile:hover .tile-image,
  .quote-tile:focus-visible .tile-image,
  .quote-tile.is-active .tile-image {
    transform: none !important;
  }
}