/* The privacy document shares the site's paper, palm shadows and forest tones. */
body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #faf5e9;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  isolation: isolate;
  min-height: 74px;
  padding: .5rem clamp(1rem, 3vw, 2.75rem);
  background-color: #f8f2e6;
  background-image: linear-gradient(90deg, rgba(251, 247, 238, .58), rgba(251, 247, 238, .3)), url('/assets/motion/cotton-paper-v1.webp');
  background-size: auto, 620px;
}

.site-header img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: contain;
}

.site-header .header-cta { padding: .75rem 1.25rem; }

.detail-main {
  position: relative;
  isolation: isolate;
  flex: 1;
  background-image: linear-gradient(rgba(250, 245, 233, .35), rgba(250, 245, 233, .35)), url('/assets/motion/cotton-paper-v1.webp');
  background-size: auto, 620px;
}

.detail-main::before {
  content: '';
  position: absolute;
  top: -140px;
  left: -210px;
  width: min(76vw, 860px);
  aspect-ratio: 1;
  z-index: -1;
  pointer-events: none;
  opacity: .17;
  background: url('/assets/motion/palm-shadow-v1.webp') center / contain no-repeat;
  transform: rotate(78deg);
  animation: privacy-palm-breeze 7s ease-in-out infinite alternate;
  animation-play-state: paused;
}

.detail-main::after {
  content: '';
  position: absolute;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 25% 30%, rgba(248, 206, 128, .24), transparent 56%), radial-gradient(ellipse at 85% 80%, rgba(180, 203, 153, .17), transparent 52%);
  animation: privacy-daylight 11s ease-in-out infinite alternate;
  animation-play-state: paused;
}

html[data-privacy-motion="running"] .detail-main::before,
html[data-privacy-motion="running"] .detail-main::after {
  animation-play-state: running;
}

@keyframes privacy-palm-breeze {
  from { transform: translate(-18px, -12px) rotate(73deg); }
  to { transform: translate(18px, 14px) rotate(83deg); }
}

@keyframes privacy-daylight {
  from { transform: translate(-4%, -2%) scale(1); opacity: .45; }
  to { transform: translate(4%, 2%) scale(1.07); opacity: 1; }
}

.detail-hero {
  width: min(100%, 1280px);
  padding: clamp(3rem, 7vw, 6rem) clamp(1.25rem, 6vw, 5rem) clamp(4rem, 8vw, 7rem);
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: start;
  gap: clamp(2.5rem, 6vw, 6rem);
}

.detail-hero h1 {
  max-width: none;
  font-size: clamp(4rem, 7vw, 6.5rem);
  letter-spacing: -.045em;
  line-height: .95;
}

.lead { margin-top: 1.75rem; color: #3f5b4e; font-size: clamp(1.05rem, 1.4vw, 1.2rem); }
.legal-copy { padding-top: .25rem; color: #3f5b4e; font-size: 1rem; line-height: 1.8; }
.legal-copy p { margin-bottom: 1.6rem; }
.legal-copy a { color: var(--forest); text-decoration-thickness: 1px; text-underline-offset: .2em; }
.legal-copy p:last-child { margin-bottom: 0; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .8rem; }

.site-footer {
  padding: 1.75rem clamp(1.25rem, 6vw, 5rem);
  border-top: 1px solid rgba(255, 250, 240, .12);
  background-image: linear-gradient(rgba(23, 53, 39, .88), rgba(23, 53, 39, .88)), url('/assets/motion/cotton-paper-v1.webp');
  background-size: 620px;
  background-blend-mode: soft-light;
}

@media (max-width: 760px) {
  .detail-hero { grid-template-columns: 1fr; gap: 2.5rem; }
  .detail-hero h1 { font-size: clamp(3.5rem, 15vw, 5rem); }
  .detail-main::before { width: 620px; left: -270px; top: -90px; opacity: .14; }
  .site-header { background-size: auto, 440px; }
  .detail-main { background-size: auto, 440px; }
  .legal-copy { line-height: 1.75; }
}

@media (prefers-reduced-motion: reduce) {
  .detail-main::before,
  .detail-main::after { animation: none; }
}