:root {
  --tiller-grout-light: #e8e4dc;
  --tiller-grout-medium: #d4cfc5;
  --tiller-grout-dark: #b8b3a8;
  --tiller-grout-white: #f4f0e8;
  --tiller-grout-charcoal: #6a675f;
  --tiller-texture-ceramic: linear-gradient(135deg, rgb(255 255 255 / 3%) 0%, transparent 100%);
  --tiller-texture-porcelain: linear-gradient(
    180deg,
    rgb(255 255 255 / 2%) 0%,
    rgb(0 0 0 / 1%) 100%
  );
  --tiller-texture-natural-stone: radial-gradient(
    circle at 30% 40%,
    rgb(0 0 0 / 2%) 0%,
    transparent 60%
  );
  --tiller-texture-matte: linear-gradient(
    90deg,
    transparent 48%,
    rgb(255 255 255 / 1.5%) 50%,
    transparent 52%
  );
  --tiller-grout-width-thin: 1px;
  --tiller-grout-width-standard: 2px;
  --tiller-grout-width-wide: 3px;
  --tiller-tile-subway-width: 150px;
  --tiller-tile-subway-height: 75px;
  --tiller-tile-square-sm: 100px;
  --tiller-tile-square-md: 200px;
  --tiller-tile-square-lg: 300px;
  --tiller-tile-plank-width: 225px;
  --tiller-tile-plank-height: 900px;
  --tiller-pattern-opacity-subtle: 0.03;
  --tiller-pattern-opacity-light: 0.05;
  --tiller-pattern-opacity-medium: 0.08;
  --tiller-pattern-opacity-visible: 0.12;
}

.ts-pattern-subway {
  background-color: var(--tiller-bg-main, #1a1c1a);
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent calc(var(--tiller-tile-subway-height) - var(--tiller-grout-width-standard)),
      var(--tiller-grout-light)
        calc(var(--tiller-tile-subway-height) - var(--tiller-grout-width-standard)),
      var(--tiller-grout-light) var(--tiller-tile-subway-height)
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent calc(var(--tiller-tile-subway-width) - var(--tiller-grout-width-standard)),
      var(--tiller-grout-light)
        calc(var(--tiller-tile-subway-width) - var(--tiller-grout-width-standard)),
      var(--tiller-grout-light) var(--tiller-tile-subway-width)
    ),
    var(--tiller-texture-ceramic);
  background-size:
    100% var(--tiller-tile-subway-height),
    var(--tiller-tile-subway-width) 100%,
    100% 100%;
  background-position:
    0 0,
    0 0,
    0 0;
}

.ts-pattern-subway-offset {
  background-color: var(--tiller-bg-main, #1a1c1a);
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent calc(var(--tiller-tile-subway-height) - var(--tiller-grout-width-standard)),
      var(--tiller-grout-medium)
        calc(var(--tiller-tile-subway-height) - var(--tiller-grout-width-standard)),
      var(--tiller-grout-medium) var(--tiller-tile-subway-height)
    ),
    var(--tiller-texture-porcelain);
  background-size:
    100% var(--tiller-tile-subway-height),
    100% 100%;
  position: relative;
}

.ts-pattern-herringbone {
  background-color: var(--tiller-bg-soft, #222524);
  background-image:
    linear-gradient(
      45deg,
      transparent 48%,
      var(--tiller-grout-light) 48%,
      var(--tiller-grout-light) 52%,
      transparent 52%
    ),
    linear-gradient(
      -45deg,
      transparent 48%,
      var(--tiller-grout-light) 48%,
      var(--tiller-grout-light) 52%,
      transparent 52%
    ),
    var(--tiller-texture-natural-stone);
  background-size:
    40px 40px,
    40px 40px,
    100% 100%;
  background-position:
    0 0,
    20px 20px,
    0 0;
  opacity: var(--tiller-pattern-opacity-subtle);
  position: relative;
}

.ts-pattern-grid {
  background-color: var(--tiller-bg-main, #1a1c1a);
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent calc(var(--tiller-tile-square-md) - var(--tiller-grout-width-thin)),
      var(--tiller-grout-white) calc(var(--tiller-tile-square-md) - var(--tiller-grout-width-thin)),
      var(--tiller-grout-white) var(--tiller-tile-square-md)
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent calc(var(--tiller-tile-square-md) - var(--tiller-grout-width-thin)),
      var(--tiller-grout-white) calc(var(--tiller-tile-square-md) - var(--tiller-grout-width-thin)),
      var(--tiller-grout-white) var(--tiller-tile-square-md)
    ),
    var(--tiller-texture-matte);
  background-size:
    var(--tiller-tile-square-md) 100%,
    100% var(--tiller-tile-square-md),
    100% 100%;
  opacity: var(--tiller-pattern-opacity-light);
  position: relative;
}

.ts-pattern-stacked {
  background-color: var(--tiller-bg-slate, #2a2d2c);
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent calc(var(--tiller-tile-square-sm) - var(--tiller-grout-width-standard)),
      var(--tiller-grout-light)
        calc(var(--tiller-tile-square-sm) - var(--tiller-grout-width-standard)),
      var(--tiller-grout-light) var(--tiller-tile-square-sm)
    ),
    var(--tiller-texture-ceramic);
  background-size:
    100% var(--tiller-tile-square-sm),
    100% 100%;
  opacity: var(--tiller-pattern-opacity-subtle);
  position: relative;
}

.ts-pattern-plank {
  background-color: var(--tiller-bg-soft, #222524);
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent calc(150px - var(--tiller-grout-width-thin)),
      var(--tiller-grout-medium) calc(150px - var(--tiller-grout-width-thin)),
      var(--tiller-grout-medium) 150px
    ),
    var(--tiller-texture-natural-stone);
  background-size:
    100% 150px,
    100% 100%;
  opacity: var(--tiller-pattern-opacity-light);
  position: relative;
}

.ts-grout-divider {
  height: var(--tiller-grout-width-standard);
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--tiller-grout-light) 10%,
    var(--tiller-grout-medium) 50%,
    var(--tiller-grout-light) 90%,
    transparent 100%
  );
  margin: var(--tiller-spacing-lg, 2rem) 0;
  opacity: 60%;
}

.ts-grout-accent-left {
  border-left: var(--tiller-grout-width-wide) solid var(--tiller-grout-dark);
  padding-left: var(--tiller-spacing-md, 1rem);
}

.ts-grout-accent-right {
  border-right: var(--tiller-grout-width-wide) solid var(--tiller-grout-dark);
  padding-right: var(--tiller-spacing-md, 1rem);
}

.ts-grout-frame {
  border: var(--tiller-grout-width-standard) solid var(--tiller-grout-light);
  box-shadow:
    inset 0 0 0 var(--tiller-grout-width-thin) var(--tiller-grout-white),
    var(--tiller-shadow-sm);
  position: relative;
}

.ts-hero-tiled {
  background-color: var(--tiller-bg-main, #1a1c1a);
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 299px,
      var(--tiller-grout-white) 299px,
      var(--tiller-grout-white) 300px
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 299px,
      var(--tiller-grout-white) 299px,
      var(--tiller-grout-white) 300px
    ),
    linear-gradient(135deg, var(--tiller-bg-main, #1a1c1a) 0%, var(--tiller-bg-soft, #222524) 100%);
  background-size:
    300px 100%,
    100% 300px,
    100% 100%;
  position: relative;
}

.ts-card-subway {
  background-color: var(--tiller-bg-slate, #2a2d2c);
  background-image: var(--tiller-texture-ceramic);
  border: var(--tiller-grout-width-thin) solid var(--tiller-grout-light);
  position: relative;
}

.ts-card-subway::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 74px,
    var(--tiller-grout-white) 74px,
    var(--tiller-grout-white) 75px
  );
  opacity: 15%;
  pointer-events: none;
  z-index: 0;
}

.ts-card-subway > * {
  position: relative;
  z-index: 1;
}

.ts-section-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--tiller-grout-light) 5%,
    var(--tiller-grout-medium) 25%,
    var(--tiller-grout-dark) 50%,
    var(--tiller-grout-medium) 75%,
    var(--tiller-grout-light) 95%,
    transparent 100%
  );
  margin: var(--tiller-spacing-xl, 4rem) auto;
  max-width: 80%;
  opacity: 50%;
  position: relative;
}

.ts-overlay-grid::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 199px,
      rgb(255 255 255 / 2%) 199px,
      rgb(255 255 255 / 2%) 200px
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 199px,
      rgb(255 255 255 / 2%) 199px,
      rgb(255 255 255 / 2%) 200px
    );
  background-size:
    200px 100%,
    100% 200px;
  pointer-events: none;
  z-index: 0;
}

.ts-image-tiled {
  border: var(--tiller-grout-width-wide) solid var(--tiller-grout-medium);
  box-shadow:
    inset 0 0 0 var(--tiller-grout-width-thin) var(--tiller-grout-white),
    0 4px 12px rgb(0 0 0 / 8%),
    0 1px 3px rgb(0 0 0 / 12%);
  border-radius: var(--tiller-border-radius-sm, 4px);
  overflow: hidden;
  position: relative;
}

.ts-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--tiller-grout-width-wide);
  background-color: var(--tiller-grout-medium);
  padding: var(--tiller-grout-width-wide);
  border-radius: var(--tiller-border-radius-md, 8px);
}

@media (max-width: 1024px) {
  .ts-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .ts-gallery-grid {
    grid-template-columns: 1fr;
  }
}

.ts-gallery-grid > * {
  background: var(--tiller-bg-slate, #2a2d2c);
  border-radius: var(--tiller-border-radius-sm, 4px);
}

@media (max-width: 900px) {
  :root {
    --tiller-tile-subway-width: 120px;
    --tiller-tile-subway-height: 60px;
    --tiller-tile-square-sm: 80px;
    --tiller-tile-square-md: 150px;
    --tiller-tile-square-lg: 200px;
  }

  .ts-hero-tiled {
    background-size:
      200px 100%,
      100% 200px,
      100% 100%;
  }
}

@media (max-width: 600px) {
  :root {
    --tiller-tile-subway-width: 100px;
    --tiller-tile-subway-height: 50px;
    --tiller-tile-square-sm: 60px;
    --tiller-tile-square-md: 120px;
  }

  .ts-hero-tiled {
    background-size:
      150px 100%,
      100% 150px,
      100% 100%;
  }

  .ts-pattern-subway,
  .ts-pattern-grid,
  .ts-pattern-stacked {
    opacity: calc(var(--tiller-pattern-opacity-subtle) * 70%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ts-pattern-subway,
  .ts-pattern-herringbone,
  .ts-pattern-grid,
  .ts-pattern-stacked,
  .ts-pattern-plank {
    background-image: none;
    opacity: 100%;
  }
}

.ts-pattern-subway,
.ts-pattern-herringbone,
.ts-pattern-grid,
.ts-pattern-stacked,
.ts-pattern-plank {
  color: var(--tiller-text-primary, #1a2018);
}

@media (prefers-contrast: high) {
  .ts-pattern-subway,
  .ts-pattern-herringbone,
  .ts-pattern-grid,
  .ts-pattern-stacked,
  .ts-pattern-plank,
  .ts-overlay-grid::after {
    background-image: none;
    opacity: 100%;
  }

  .ts-grout-divider,
  .ts-section-divider {
    background: currentcolor;
    opacity: 30%;
  }
}

.ts-pattern-retro-salmon {
  background-color: var(--tiller-bg-soft, #222524);
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent calc(100px - 2px),
      var(--retro-tile-salmon) calc(100px - 2px),
      var(--retro-tile-salmon) 100px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent calc(100px - 2px),
      var(--retro-tile-salmon) calc(100px - 2px),
      var(--retro-tile-salmon) 100px
    );
  background-size:
    100% 100px,
    100px 100%;
  opacity: 8%;
  position: relative;
}

.ts-pattern-retro-mint {
  background-color: var(--tiller-bg-dark, #1a1c1a);
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent calc(100px - 2px),
      var(--retro-tile-mint) calc(100px - 2px),
      var(--retro-tile-mint) 100px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent calc(100px - 2px),
      var(--retro-tile-mint) calc(100px - 2px),
      var(--retro-tile-mint) 100px
    );
  background-size:
    100% 100px,
    100px 100%;
  opacity: 8%;
  position: relative;
}

.ts-pattern-retro-teal {
  background-color: var(--tiller-bg-stone, #222524);
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent calc(100px - 2px),
      var(--retro-tile-teal) calc(100px - 2px),
      var(--retro-tile-teal) 100px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent calc(100px - 2px),
      var(--retro-tile-teal) calc(100px - 2px),
      var(--retro-tile-teal) 100px
    );
  background-size:
    100% 100px,
    100px 100%;
  opacity: 10%;
  position: relative;
}

.ts-pattern-retro-checkerboard {
  background-color: var(--tiller-bg-dark, #1a1c1a);
  background-image:
    linear-gradient(45deg, var(--retro-tile-teal) 25%, transparent 25%),
    linear-gradient(-45deg, var(--retro-tile-teal) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--retro-tile-teal) 75%),
    linear-gradient(-45deg, transparent 75%, var(--retro-tile-teal) 75%);
  background-size: 40px 40px;
  background-position:
    0 0,
    0 20px,
    20px -20px,
    -20px 0;
  opacity: 6%;
  position: relative;
}

.ts-pattern-retro-geometric {
  background-color: var(--tiller-bg-slate, #2a2d2c);
  background-image:
    linear-gradient(135deg, var(--retro-tile-salmon) 25%, transparent 25%),
    linear-gradient(225deg, var(--retro-tile-salmon) 25%, transparent 25%),
    linear-gradient(45deg, var(--retro-tile-teal) 25%, transparent 25%),
    linear-gradient(315deg, var(--retro-tile-teal) 25%, transparent 25%);
  background-size: 60px 60px;
  background-position:
    30px 0,
    30px 0,
    0 0,
    0 0;
  opacity: 5%;
  position: relative;
}

.ts-pattern-retro-diagonal {
  background-color: var(--tiller-bg-stone, #222524);
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 20px,
    var(--retro-tile-salmon) 20px,
    var(--retro-tile-salmon) 22px,
    transparent 22px,
    transparent 40px,
    var(--retro-tile-teal) 40px,
    var(--retro-tile-teal) 42px
  );
  opacity: 8%;
  position: relative;
}

.grout-retro-teal {
  background-image:
    linear-gradient(rgb(0 128 128 / 20%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(0 128 128 / 20%) 1px, transparent 1px);
  background-size: 24px 24px;
}

.grout-retro-salmon {
  background-image:
    linear-gradient(rgb(250 128 114 / 15%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(250 128 114 / 15%) 1px, transparent 1px);
  background-size: 24px 24px;
}

.ts-card-retro-salmon {
  background-color: var(--tiller-bg-slate, #2a2d2c);
  border: 3px solid var(--retro-salmon);
  box-shadow:
    inset 0 0 0 1px var(--retro-salmon-light),
    5px 5px 0 rgb(0 0 0 / 20%);
  position: relative;
  border-radius: var(--tiller-border-radius-sm);
}

.ts-card-retro-salmon::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(
    90deg,
    var(--retro-salmon) 0%,
    var(--retro-teal) 50%,
    var(--retro-mint) 100%
  );
  border-radius: var(--tiller-border-radius-sm) var(--tiller-border-radius-sm) 0 0;
}

.ts-card-retro-teal {
  background-color: var(--tiller-bg-slate, #2a2d2c);
  border: 3px solid var(--retro-teal);
  box-shadow:
    inset 0 0 0 1px var(--retro-teal-light),
    5px 5px 0 rgb(0 0 0 / 20%);
  position: relative;
  border-radius: var(--tiller-border-radius-sm);
}

.ts-card-retro-teal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--retro-teal) 0%, var(--retro-purple) 100%);
  border-radius: var(--tiller-border-radius-sm) var(--tiller-border-radius-sm) 0 0;
}

.ts-divider-retro-rainbow {
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--retro-teal) 0%,
    var(--retro-purple) 25%,
    var(--retro-salmon) 50%,
    var(--retro-mint) 75%,
    var(--retro-teal) 100%
  );
  margin: var(--tiller-spacing-xl, 4rem) auto;
  max-width: 60%;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
}