:root {
  --canvas: #fff7ef;
  --paper: #f8eadb;
  --cloth-red: #c95b4d;
  --cloth-deep: #8f372f;
  --cloth-cream: #ffe6d3;
  --cloth-thread: #f9c3aa;
  --text-red: #bd5147;
  --olive: #536044;
  --ink: #38413a;
  --muted: #65706a;
  --ease-out: cubic-bezier(0.2, 0.82, 0.12, 1);
  --cloth-tile-size: 420px;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button {
  font: inherit;
}

.composition {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 255, 255, 0.9), transparent 30rem),
    radial-gradient(circle at 50% 68%, rgba(197, 91, 77, 0.09), transparent 38rem),
    var(--canvas);
}

.hero {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: minmax(18rem, 42vh) 1fr;
  place-items: center;
  width: 100%;
  min-height: 100vh;
  padding: clamp(3rem, 5vw, 5.5rem) clamp(1.5rem, 5vw, 7rem) 0;
  text-align: center;
}

.hero__copy {
  display: grid;
  justify-items: center;
  gap: clamp(0.8rem, 1.2vw, 1.2rem);
  z-index: 2;
}

.eyebrow {
  margin: 0;
  color: var(--text-red);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 2.1vw, 2.4rem);
  font-weight: 700;
}

h1 {
  max-width: 56rem;
  margin: 0;
  color: var(--text-red);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.7rem, 6.4vw, 6.9rem);
  line-height: 0.9;
  letter-spacing: 0;
}

h1 span {
  color: var(--olive);
}

.subhead {
  max-width: 27rem;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1.1rem, 1.45vw, 1.65rem);
  line-height: 1.25;
}

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  min-height: 3.7rem;
  margin-top: 0.2rem;
  padding: 0 2.25rem;
  border: 0;
  border-radius: 0.55rem;
  background: linear-gradient(180deg, #d46355, #bd4b40);
  color: #fff8f1;
  box-shadow: 0 0.75rem 1.6rem rgba(143, 55, 47, 0.18);
  font-size: clamp(1rem, 1.25vw, 1.45rem);
  font-weight: 700;
}

.legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1rem;
}

.legal-link {
  color: var(--text-red);
  font-size: clamp(0.86rem, 1vw, 1rem);
  font-weight: 800;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.22em;
}

.phone {
  align-self: end;
  width: min(24rem, 72vw);
  aspect-ratio: 0.49;
  padding: 0.55rem;
  border-radius: 3rem 3rem 0 0;
  background: #181a1a;
  box-shadow: 0 -0.3rem 0 #3d403f inset, 0 1.7rem 4rem rgba(72, 40, 25, 0.22);
  transform: translateY(6rem);
}

.phone__screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 2.55rem 2.55rem 0 0;
  background: linear-gradient(180deg, #fff7ee, #f8efe7);
  padding: 2.1rem 1.8rem;
  text-align: left;
}

.status {
  font-size: 0.9rem;
  font-weight: 800;
}

.dynamic-island {
  position: absolute;
  top: 1.1rem;
  left: 50%;
  width: 5.9rem;
  height: 1.55rem;
  border-radius: 999rem;
  background: #080909;
  transform: translateX(-50%);
}

.phone__title {
  margin-top: 2rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  font-weight: 700;
}

.phone__muted {
  margin: 0.2rem 0 1.6rem;
  color: #677069;
  font-size: 0.78rem;
}

.mood-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.65rem;
  margin-bottom: 1.8rem;
}

.mood-row span {
  aspect-ratio: 1;
  border-radius: 50%;
  background: #dfd8c7;
}

.mood-row .active {
  outline: 2px solid #d55e4f;
  outline-offset: 0.35rem;
  background: #ffd5b9;
}

.entry {
  height: 4.6rem;
  margin-bottom: 0.85rem;
  border: 1px solid rgba(156, 120, 91, 0.12);
  border-radius: 1rem;
  background: linear-gradient(90deg, rgba(220, 204, 185, 0.42) 0 28%, rgba(255, 255, 255, 0.42) 28%);
}

.entry.short {
  width: 88%;
}

.picnic-loader {
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow: hidden;
  pointer-events: none;
  background: var(--canvas);
  transition: background-color 620ms ease 620ms;
}

.picnic-loader[data-state="settled"] {
  z-index: 1;
  background: rgba(255, 247, 239, 0);
}

.picnic-loader__brand {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  display: grid;
  justify-items: center;
  gap: 1rem;
  color: #fff7ef;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.4rem, 5vw, 5.8rem);
  font-weight: 700;
  text-shadow: 0 0.18rem 1.4rem rgba(83, 33, 27, 0.26);
  transform: translate(-50%, -50%);
  transition: opacity 360ms ease, transform 520ms var(--ease-out);
}

.picnic-loader[data-state="settled"] .picnic-loader__brand {
  opacity: 0;
  transform: translate(-50%, -58%) scale(0.95);
}

.picnic-loader__sheet {
  position: absolute;
  inset: -4vmax;
  z-index: 3;
  background-color: var(--cloth-red);
  background-image: url("../assets/picnic-cloth-tile.webp?v=picnic-cloth-perf-20260514");
  background-repeat: repeat;
  background-size: var(--cloth-tile-size) var(--cloth-tile-size);
  background-position: center;
  box-shadow:
    inset 0 0 4rem rgba(92, 31, 26, 0.1),
    inset 0 0 0 1px rgba(255, 245, 236, 0.24);
  opacity: 0;
  transform-origin: center;
  contain: paint;
  will-change: opacity;
}

.stitches {
  display: flex;
  gap: 0.65rem;
}

.stitches i {
  display: block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.78;
}

.picnic-loader__cloth {
  position: absolute;
  z-index: 2;
  width: clamp(26rem, 44vmax, 58rem);
  height: clamp(19rem, 33vmax, 42rem);
  border-radius: 0.35rem;
  isolation: isolate;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 243, 229, 0.42), transparent 28%),
    radial-gradient(circle at 78% 84%, rgba(120, 36, 29, 0.22), transparent 32%),
    url("../assets/picnic-cloth-tile.webp?v=picnic-cloth-perf-20260514");
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: 100% 100%, 100% 100%, var(--cloth-tile-size) var(--cloth-tile-size);
  background-position: center, center, center;
  background-blend-mode: soft-light, multiply, normal;
  box-shadow:
    0 1.5rem 3.4rem rgba(83, 33, 27, 0.24),
    0 0.16rem 0.32rem rgba(255, 246, 236, 0.42) inset,
    inset 0 0 0 0.08rem rgba(255, 245, 236, 0.42),
    inset 0 -1rem 0 rgba(128, 43, 34, 0.16),
    inset 0.7rem 0 1.2rem rgba(255, 245, 234, 0.18),
    inset -0.8rem 0 1.1rem rgba(98, 31, 26, 0.13);
  transform-origin: center;
  transition:
    transform 1380ms var(--ease-out),
    opacity 420ms ease;
  opacity: 1;
  backface-visibility: hidden;
  contain: paint;
  will-change: transform, opacity;
}

.picnic-loader[data-state="loading"] .picnic-loader__sheet {
  opacity: 1;
}

.picnic-loader__cloth::before,
.picnic-loader__cloth::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}

.picnic-loader__cloth::before {
  z-index: 1;
  background:
    repeating-linear-gradient(2deg, rgba(255, 255, 255, 0.08) 0 0.05rem, rgba(255, 255, 255, 0) 0.05rem 0.34rem),
    repeating-linear-gradient(92deg, rgba(101, 35, 29, 0.06) 0 0.045rem, rgba(255, 255, 255, 0) 0.045rem 0.39rem),
    repeating-linear-gradient(34deg, rgba(255, 238, 221, 0.08) 0 0.06rem, rgba(255, 255, 255, 0) 0.06rem 0.72rem),
    radial-gradient(circle at 22% 18%, rgba(255, 249, 240, 0.3), transparent 24%),
    radial-gradient(circle at 68% 78%, rgba(97, 31, 26, 0.16), transparent 30%);
  opacity: 0.58;
  mix-blend-mode: soft-light;
}

.picnic-loader__cloth::after {
  inset: 0.7rem;
  z-index: 2;
  border: 0.16rem solid rgba(255, 239, 224, 0.42);
  border-radius: 0.18rem;
  background:
    repeating-linear-gradient(90deg, rgba(255, 240, 225, 0.22) 0 0.18rem, transparent 0.18rem 1.15rem),
    repeating-linear-gradient(0deg, rgba(130, 45, 37, 0.16) 0 0.14rem, transparent 0.14rem 1.25rem);
  box-shadow:
    0 0.58rem 0 rgba(123, 39, 32, 0.2),
    0 -0.18rem 0 rgba(255, 248, 240, 0.34),
    inset 0 0 0 0.12rem rgba(128, 45, 37, 0.2);
  opacity: 0.78;
}

.picnic-loader__cloth--top-left {
  top: -11vmax;
  left: -10vmax;
  transform: translate(-4%, -7%) rotate(-43deg) scale(0.82);
}

.picnic-loader__cloth--top-right {
  top: -9vmax;
  right: -7vmax;
  transform: translate(4%, -8%) rotate(35deg) scale(0.85);
}

.picnic-loader__cloth--bottom-left {
  bottom: -15vmax;
  left: -15vmax;
  width: clamp(31rem, 52vmax, 68rem);
  height: clamp(21rem, 36vmax, 47rem);
  transform: translate(-12%, 24%) rotate(-16deg) scale(0.92);
}

.picnic-loader__cloth--right {
  right: -14vmax;
  bottom: 11vh;
  width: clamp(26rem, 38vmax, 54rem);
  height: clamp(19rem, 27vmax, 38rem);
  transform: translate(16%, 1%) rotate(-8deg) scale(0.9);
}

.picnic-loader__cloth--bottom-right {
  right: 0;
  bottom: -13vmax;
  width: clamp(23rem, 35vmax, 50rem);
  height: clamp(16rem, 25vmax, 36rem);
  transform: translate(13%, 24%) rotate(26deg) scale(0.82);
}

.picnic-loader[data-state="loading"] .picnic-loader__cloth--top-left {
  transform: translate(12%, 10%) rotate(-35deg) scale(0.9);
}

.picnic-loader[data-state="loading"] .picnic-loader__cloth--top-right {
  transform: translate(-12%, 10%) rotate(28deg) scale(0.93);
}

.picnic-loader[data-state="loading"] .picnic-loader__cloth--bottom-left {
  transform: translate(2%, 6%) rotate(-10deg) scale(0.98);
}

.picnic-loader[data-state="loading"] .picnic-loader__cloth--right {
  transform: translate(-4%, 0) rotate(-4deg) scale(0.96);
}

.picnic-loader[data-state="loading"] .picnic-loader__cloth--bottom-right {
  transform: translate(-4%, 4%) rotate(20deg) scale(0.92);
}

.replay {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 30;
  min-height: 2.75rem;
  padding: 0 1.1rem;
  border: 1px solid rgba(189, 81, 71, 0.22);
  border-radius: 999rem;
  background: rgba(255, 247, 239, 0.82);
  color: var(--text-red);
  box-shadow: 0 0.7rem 2rem rgba(88, 45, 34, 0.12);
  font-weight: 800;
  backdrop-filter: blur(0.75rem);
}

.composition:has(.picnic-loader[data-state="loading"]) .replay {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 1120px) {
  .picnic-loader__cloth {
    width: clamp(18rem, 36vmax, 34rem);
    height: clamp(13rem, 26vmax, 26rem);
  }

  .picnic-loader__cloth--top-left {
    top: -14vmax;
    left: -16vmax;
  }

  .picnic-loader__cloth--top-right {
    top: -13vmax;
    right: -16vmax;
  }

  .picnic-loader__cloth--bottom-left {
    bottom: -19vmax;
    left: -22vmax;
    width: clamp(24rem, 44vmax, 42rem);
    height: clamp(16rem, 30vmax, 29rem);
  }

  .picnic-loader__cloth--right {
    right: -22vmax;
    bottom: 8vh;
    width: clamp(20rem, 34vmax, 34rem);
    height: clamp(14rem, 24vmax, 24rem);
  }

  .picnic-loader__cloth--bottom-right {
    right: -12vmax;
    bottom: -18vmax;
    width: clamp(18rem, 30vmax, 30rem);
    height: clamp(13rem, 22vmax, 22rem);
  }
}

@media (max-width: 760px) {
  .hero {
    grid-template-rows: minmax(22rem, 56vh) 1fr;
    padding-inline: 1.1rem;
  }

  h1 {
    font-size: clamp(3.25rem, 16vw, 5.7rem);
  }

  .subhead {
    max-width: 19rem;
  }

  .phone {
    width: min(20rem, 82vw);
    transform: translateY(4.6rem);
  }

  .picnic-loader__brand {
    font-size: clamp(2rem, 11vw, 4rem);
  }

  .picnic-loader__cloth {
    width: clamp(20rem, 66vmax, 44rem);
    height: clamp(15rem, 48vmax, 34rem);
  }

  .picnic-loader__cloth--right {
    bottom: 18vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .picnic-loader,
  .picnic-loader__brand,
  .picnic-loader__cloth {
    transition-duration: 1ms;
  }
}