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

.bg-surface { background: var(--color-surface); }
.bg-surface-bright { background: var(--color-surface-bright); }
.bg-negi { background: var(--color-negi-white); }
.bg-moss { background: var(--color-moss-deep); }
.bg-secondary-container { background: var(--color-secondary-container); }
.bg-ink { background: var(--color-ink-charcoal); }

.reveal-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-up {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero__bg img {
    transform: none !important;
  }

  .card--hover,
  .btn,
  .site-nav a {
    transition: none;
  }
}

.divider-h {
  height: 1px;
  background: var(--color-outline-variant);
}

.divider-v {
  width: 1px;
  background: var(--color-outline-variant);
}

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-8 { gap: 32px; }
.gap-16 { gap: 64px; }
.text-center { text-align: center; }
.mb-8 { margin-bottom: 32px; }
.mb-16 { margin-bottom: 64px; }
.mt-8 { margin-top: 32px; }
.mt-16 { margin-top: 64px; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.mx-auto { margin-inline: auto; }
.w-full { width: 100%; }
.aspect-square { aspect-ratio: 1; }
.aspect-video { aspect-ratio: 16 / 9; }
.object-cover { object-fit: cover; }
.border-l-accent { border-left: 4px solid var(--color-moss-deep); }
.opacity-80 { opacity: 0.8; }
.hidden-md { display: none; }
.desktop-only { display: none; }

@media (min-width: 768px) {
  .hidden-md { display: block; }
  .desktop-only { display: inline-flex; }
  .md-flex { display: flex; }
  .md-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
  .md-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .md-col-5 { grid-column: span 5; }
  .md-col-6 { grid-column: span 6; }
  .md-col-7 { grid-column: span 7; }
  .md-col-8 { grid-column: span 8; }
}

.product-grid {
  display: grid;
  gap: 32px;
}

@media (min-width: 768px) {
  .product-grid {
    grid-template-columns: 7fr 5fr;
  }
}

.bento-grid {
  display: grid;
  gap: 32px;
}

@media (min-width: 768px) {
  .bento-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .bento-span-2 {
    grid-column: span 2;
  }
}

.timeline {
  display: grid;
  border: 1px solid var(--color-outline-variant);
}

@media (min-width: 768px) {
  .timeline {
    grid-template-columns: repeat(3, 1fr);
  }
}

.timeline__item {
  padding: 48px;
  border-bottom: 1px solid var(--color-outline-variant);
}

@media (min-width: 768px) {
  .timeline__item {
    border-bottom: none;
    border-right: 1px solid var(--color-outline-variant);
  }

  .timeline__item:last-child {
    border-right: none;
  }
}

.timeline__item:hover {
  background: var(--color-surface-container);
}

.newsletter-form {
  display: flex;
  border-bottom: 1px solid color-mix(in srgb, var(--color-washi-cream) 30%, transparent);
}

.newsletter-form input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 8px 0;
  color: var(--color-washi-cream);
}

.newsletter-form input::placeholder {
  color: color-mix(in srgb, var(--color-washi-cream) 30%, transparent);
}

.newsletter-form input:focus {
  outline: none;
  border-bottom-color: var(--color-washi-cream);
}

.newsletter-form button {
  background: transparent;
  border: none;
  border-bottom: 1px solid color-mix(in srgb, var(--color-washi-cream) 30%, transparent);
  color: var(--color-washi-cream);
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
}