[data-theme="picnic"] {
  --gingham-red: rgba(198, 40, 40, 0.55);
  --blanket-white: #fdf6f0;

  --font-family: "Outfit", sans-serif;
  --text-color: #5a3517;
  --page-bg: #fdf6f0;
  --container-bg: transparent;
  --card-border: transparent;
  --card-shadow: 6px 12px rgba(74, 40, 12, 0.35);

  --weave-size: 15px;
  --weave-rotate: 15deg;
  --wicker-1: #c9a876; /* diagonal reeds */
  --wicker-2: #e8d4b8; /* crossing reeds */
  --wicker-base: #d9c4a0; /* gaps between reeds */
  --wicker:
    linear-gradient(
        45deg,
        var(--wicker-1) 12%,
        transparent 0,
        transparent 88%,
        var(--wicker-1) 0
      )
      0 0 / var(--weave-size) var(--weave-size),
    linear-gradient(
        135deg,
        transparent 37%,
        var(--wicker-2) 0,
        var(--wicker-2) 63%,
        transparent 0
      )
      0 0 / var(--weave-size) var(--weave-size),
    linear-gradient(
        45deg,
        transparent 37%,
        var(--wicker-1) 0,
        var(--wicker-1) 63%,
        transparent 0
      )
      0 0 / var(--weave-size) var(--weave-size);

  --card-front-bg: var(--wicker-base);
  --card-back-bg: var(--wicker-base);
  --theme-cycle-bg: var(--wicker-base);
}

[data-theme="picnic"] .theme-cycle {
  box-shadow: none;
  border: 1px solid var(--text-color);
}

[data-theme="picnic"] .title {
  font-family: "Gochi Hand", cursive;
  font-size: 2.1rem;
  letter-spacing: 0.12em;
  line-height: 0.8;
}

[data-theme="picnic"] .roles,
[data-theme="picnic"] .contact-links {
  font-weight: 700;
}

[data-theme="picnic"] .contact-links svg {
  filter: drop-shadow(0 0 8px #ffffff);
}

/* Paint the seamless 45deg weave on a clipped, rotated pseudo-element */
[data-theme="picnic"] .flip-card-front,
[data-theme="picnic"] .flip-card-back {
  overflow: hidden;
  isolation: isolate;
  text-shadow: 0 0 2px #ffffff;
}

[data-theme="picnic"] .flip-card-front::before,
[data-theme="picnic"] .flip-card-back::before {
  content: "";
  position: absolute;
  inset: -35%;
  z-index: -1;
  background: var(--wicker), var(--wicker-base);
  transform: rotate(var(--weave-rotate));
}

/* The gingham blanket. */
[data-theme="picnic"] .container::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 30px,
      var(--gingham-red) 30px 60px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0 30px,
      var(--gingham-red) 30px 60px
    ),
    var(--blanket-white);
}