:root {
  --sand: #efe6d4;
  --ink: #1f2a30;
  --soft: #66737a;
  --rule: #e0d6c2;
  --link: #0f6f8f;
  --paper: #fbf8f2;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #e9eef0; --soft: #9aa7ad; --rule: #2a3236; --link: #6fd0ea; --paper: #12181b;
  }
}
:root[data-theme="dark"] {
  --ink: #e9eef0; --soft: #9aa7ad; --rule: #2a3236; --link: #6fd0ea; --paper: #12181b;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 16px/1.6 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }

/* ---------- landing: the photo, whole, with its own colors filling the rest of the screen ---------- */
/* Above and below the photo the screen continues its own sky and sand, sampled from its edges,
   so a wide screen reads as more of the same day rather than a picture with bars. */
.beach {
  position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden;
  display: grid; place-items: center;
  background:
    linear-gradient(90deg, #6490d6 0%, #5b88c9 45%, #22559e 100%) top / 100% 50% no-repeat,
    linear-gradient(90deg, #ae996f 0%, #c3ac91 50%, #d2bb9e 100%) bottom / 100% 50% no-repeat;
}
.beach::before, .beach::after { content: ""; position: absolute; left: 0; right: 0; height: 50%; }
.beach::before { top: 0; background: linear-gradient(180deg, rgba(12, 36, 96, .35), transparent 55%); }
.beach::after { bottom: 0; background: linear-gradient(0deg, rgba(90, 70, 40, .2), transparent 55%); }
.beach picture { position: relative; z-index: 1; width: 100%; }
/* Soften the photo's top and bottom edges into the same colors the screen continues with. */
.beach picture::before, .beach picture::after {
  content: ""; position: absolute; left: 0; right: 0; height: 7%; z-index: 2; pointer-events: none;
}
.beach picture::before {
  top: 0;
  background: linear-gradient(90deg, #6490d6 0%, #5b88c9 45%, #22559e 100%);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent);
}
.beach picture::after {
  bottom: 0;
  background: linear-gradient(90deg, #ae996f 0%, #c3ac91 50%, #d2bb9e 100%);
  -webkit-mask-image: linear-gradient(0deg, #000, transparent); mask-image: linear-gradient(0deg, #000, transparent);
}
.beach img {
  display: block; width: 100%; height: auto; max-height: 100svh; object-fit: contain;
  animation: settle 1.4s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes settle { from { opacity: 0; transform: scale(1.02); } }

/* Portrait screens: a 3:1 panorama would be a thin strip, so fill the screen and
   pan slowly from one end of the bay to the other, letter by letter. */
@media (max-aspect-ratio: 6/5) {
  .beach::before, .beach::after, .beach picture::before, .beach picture::after { display: none; }
  .beach picture { height: 100svh; }
  .beach img {
    height: 100svh; max-height: none; object-fit: cover; object-position: 10% 50%;
    -webkit-mask-image: none; mask-image: none;
    animation: settle 1.4s cubic-bezier(.2, .7, .2, 1) both, pan 36s ease-in-out 1s infinite alternate;
  }
  @keyframes pan { from { object-position: 10% 50%; } to { object-position: 90% 50%; } }
}
.corner {
  position: absolute; z-index: 2; right: 16px; bottom: 14px;
  font-size: .8rem; letter-spacing: .06em;
}
.corner a {
  color: #fff; text-decoration: none; padding: 6px 12px; border-radius: 999px;
  background: rgba(0, 0, 0, .22); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.corner a:hover, .corner a:focus-visible { background: rgba(0, 0, 0, .38); }

/* ---------- privacy page ---------- */
.doc { background: var(--paper); color: var(--ink); }
.band {
  display: block;
  height: clamp(160px, 26vw, 300px);
  background: url("/beach-sm.webp") center 62% / cover no-repeat, #6fb3d8;
}
.doc main { max-width: 40rem; margin: 0 auto; padding: 2.6rem 16px 2rem; }
.doc .back { font-size: .85rem; }
.doc h1 { font: 600 2.1rem/1.15 "Inter", system-ui, sans-serif; letter-spacing: -.02em; margin: 1rem 0 .4rem; }
.doc .lede { color: var(--soft); margin: 0 0 2rem; }
.doc h2 {
  font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--soft);
  margin: 2.2rem 0 .5rem; padding-top: 1.4rem; border-top: 1px solid var(--rule);
}
.doc p { margin: 0 0 1rem; }
.doc a { color: var(--link); text-underline-offset: 3px; }
.doc footer { max-width: 40rem; margin: 0 auto; padding: 1rem 16px 3rem; color: var(--soft); font-size: .8rem; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }