/* brand fonts, self-hosted (SIL Open Font License, see fonts/OFL.txt) so no third-party font requests */
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/fredoka-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/fredoka-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/nunito-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/nunito-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/nunito-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/fraunces-latin-400-italic.woff2") format("woff2"); }

/* cove: no contact pals
   shared styles for covepals.com
   direction c, golden hour. re-skin by editing the :root tokens only */

:root {
  /* palette, direction c (golden hour) */
  --ground: #fff1dc;      /* honey light, page background */
  --surface: #ffe0c2;     /* peach, cards */
  --ink: #27384a;         /* deep sea, text */
  --driftwood: #7a6456;   /* muted, decorative use */
  --water: #2e8c86;       /* gold teal */
  --honey: #f0b45e;       /* warm */
  --accent: #ef9a80;      /* soft coral, buttons */
  --glow: #ffd27a;        /* low sun */

  /* text and ui roles */
  --ink-soft: #4a4a52;    /* secondary body copy, from the c type spec */
  --muted: #735e51;       /* driftwood 6% darker so small text passes AA on peach */
  --accent-ink: #27384a;  /* text on coral */
  --accent-hover: var(--honey);
  --field: #fff8ec;
  --field-line: #9a8270;
  --line: rgba(39, 56, 74, 0.12);
  --focus: var(--water);

  /* hero scene, light: golden hour */
  --sky-1: #ffe3bf;
  --sky-2: #fff1dc;
  --sky-3: #f8b68f;
  --sun: #ffd27a;
  --sun-core: #ffe6a3;
  --sun-halo: rgba(255, 210, 122, 0.5);
  --sun-fade: rgba(255, 210, 122, 0);
  --cloud-1: #ffd9b8;
  --cloud-2: #ffe3c6;
  --sea-1: #2e8c86;
  --sea-2: #4f9a86;
  --sea-3: #d9a95e;
  --sand: #e4b57e;
  --rock: #c98a66;
  --rock-hi: #d8a27c;
  --rock-lo: #b57d60;
  --cave: #a8705a;
  --cast: #8e5f4d;
  --weed-1: #5f9c7e;
  --weed-2: #4f8a6e;
  --water-shade: #24524e;
  --ripple: #ffe6a3;
  --otter-shadow: rgba(90, 50, 30, 0.25);

  /* type: one system everywhere */
  --font-display: "Fredoka", ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Varela Round", system-ui, sans-serif;
  --font-body: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  /* layout */
  --measure: 640px;
  --wide: 1232px;
  --gutter: 16px;
  --radius: 26px;
  --radius-pill: 999px;

  color-scheme: light;
}

/* reset, kept small on purpose */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img,
svg {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.125rem, 6vw, 3rem);
}

h2 {
  font-size: clamp(1.5rem, 4vw, 1.875rem);
  margin-top: 2.25em;
}

h3 {
  font-size: 1.25rem;
  margin-top: 1.5em;
}

p,
ul,
ol {
  margin: 0 0 1em;
}

p {
  text-wrap: pretty;
}

ul,
ol {
  padding-left: 1.25em;
}

li + li {
  margin-top: 0.35em;
}

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--glow);
  color: var(--accent-ink);
}

/* skip link, visible only when focused */
.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  text-decoration: none;
  padding: 0.5em 1em;
  border-radius: var(--radius-pill);
  z-index: 20;
}

.skip:focus {
  top: var(--gutter);
}

/* page frame */
.wrap {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

.wrap--wide {
  max-width: var(--wide);
}

.site-header {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.625rem;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
}

.brand:hover {
  color: var(--ink);
}

.brand-dot {
  width: 14px;
  height: 14px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  flex: none;
}

.brand-kona {
  width: auto;
  height: 40px;
  flex: none;
  transition: transform 200ms ease;
}

.brand:hover .brand-kona {
  transform: rotate(-6deg);
}

.nav {
  display: flex;
  gap: 1.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
}

.nav a {
  color: var(--muted);
  text-decoration: none;
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

main {
  flex: 1;
  padding-top: 2rem;
  padding-bottom: 4rem;
}

/* home: the header floats on the hero sky */
.home .site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding-top: 1.75rem;
}

.home main {
  padding-top: 0;
}

/* hero: golden hour cove */
.hero {
  --kona-w: clamp(150px, 13.2vw, 196px);
  --kona-xf: 0.74;
  --kona-b: 16px;
  --scene-h: calc(var(--kona-w) * 1.03 + 110px);
  --bank-w: min(440px, 30vw);
  --wave-h: 40px;
  --horizon: calc(var(--wave-h) * 0.6);
  --sun-d: clamp(76px, 9vw + 20px, 150px);
  --sun-x: 76%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 0 0 40px 40px;
  background: var(--sea-1);
}

/* sky, from the top of the band to the horizon */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: calc(var(--scene-h) - var(--horizon) - 2px);
  z-index: -1;
  background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 50%, var(--sky-3) 130%);
}

.clouds {
  position: absolute;
  top: 118px;
  left: 58%;
  width: 210px;
  height: auto;
  z-index: 0;
  pointer-events: none;
}

.cloud-1 {
  fill: var(--cloud-1);
  opacity: 0.8;
}

.cloud-2 {
  fill: var(--cloud-2);
  opacity: 0.8;
}

.hero-copy {
  position: relative;
  z-index: 4;
  padding-top: clamp(104px, 6vw + 84px, 160px);
  padding-bottom: clamp(36px, 4vw, 56px);
}

.hero-text {
  max-width: 660px;
}

.eyebrow {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: lowercase;
  color: var(--muted);
  margin: 0 0 1.25rem;
}

.hero h1 {
  font-size: clamp(2.375rem, 1.3rem + 3.3vw, 3.875rem);
  line-height: 1.06;
  margin: 0 0 1.25rem;
}

.hero .sub {
  font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.25rem);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 34em;
  margin: 0 0 1.5rem;
}

/* email capture */
.signup {
  margin: 0;
  max-width: 560px;
}

.signup label {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 0.75rem;
}

.signup .row {
  display: flex;
  gap: 10px;
}

input[type="email"] {
  flex: 1;
  min-width: 0;
  height: 56px;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--field);
  border: 1.5px solid var(--field-line);
  border-radius: var(--radius-pill);
  padding: 0 22px;
  box-shadow: 0 4px 14px rgba(120, 70, 40, 0.1);
}

input[type="email"]::placeholder {
  color: var(--muted);
  opacity: 1;
}

input[type="email"]:focus-visible {
  border-color: var(--focus);
  outline-offset: 2px;
}

.button {
  height: 56px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1;
  color: var(--accent-ink);
  background: var(--accent);
  border: 0;
  border-radius: var(--radius-pill);
  padding: 0 28px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(200, 100, 70, 0.22);
  transition: background-color 150ms ease, transform 150ms ease;
}

.button:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

.button:active {
  transform: translateY(0);
}

.signup .fine {
  font-size: 0.875rem;
  color: var(--ink-soft);
  margin-top: 0.875rem;
  margin-bottom: 0;
}

.signup .fine a {
  color: inherit;
}

@media (max-width: 480px) {
  .signup .row {
    flex-direction: column;
  }

  input[type="email"],
  .button {
    flex: none;
    height: 52px;
    width: 100%;
  }
}

/* the scene under the copy: low sun, sea, sun path, rocks, kona floating in the water */
.hero-scene {
  position: relative;
  height: var(--scene-h);
}

.sun {
  position: absolute;
  z-index: 0;
  left: calc(var(--sun-x) - var(--sun-d) * 1.8);
  top: calc(var(--horizon) - var(--sun-d) * 2.05);
  width: calc(var(--sun-d) * 3.6);
  height: calc(var(--sun-d) * 3.6);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--sun-core) 0%, var(--sun-halo) 30%, var(--sun-fade) 100%);
  pointer-events: none;
}

.sun::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--sun-d);
  height: var(--sun-d);
  margin: calc(var(--sun-d) / -2) 0 0 calc(var(--sun-d) / -2);
  border-radius: 50%;
  background: var(--sun);
}

.sea-wave {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--wave-h);
  overflow: visible;
}

.sea {
  position: absolute;
  z-index: 1;
  top: calc(var(--wave-h) - 1px);
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, var(--sea-1) 0%, var(--sea-2) 70%, var(--sea-3) 100%);
}

.st-sea-1 { stop-color: var(--sea-1); }
.st-sea-2 { stop-color: var(--sea-2); }
.st-sea-3 { stop-color: var(--sea-3); }

.horizon {
  fill: none;
  stroke: var(--glow);
  stroke-width: 4;
  stroke-linecap: round;
  opacity: 0.45;
  vector-effect: non-scaling-stroke;
}

.streak {
  fill: var(--sun-core);
  opacity: 0.25;
}

.sun-path {
  position: absolute;
  z-index: 2;
  left: calc(var(--sun-x) - var(--sun-d) * 0.6);
  top: calc(var(--horizon) + 8px);
  width: calc(var(--sun-d) * 1.2);
  height: auto;
  pointer-events: none;
}

.sun-path ellipse {
  fill: var(--glow);
}

.cave {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 0;
  width: clamp(220px, 21vw, 320px);
  height: auto;
  overflow: visible;
}

.st-rock-hi { stop-color: var(--rock-hi); }
.st-rock-lo { stop-color: var(--rock-lo); }

.cave-mouth {
  fill: var(--cave);
}

.rim-light {
  fill: none;
  stroke: var(--glow);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.5;
}

/* small sand spit at the edge of the cove, behind the open water */
.bank {
  position: absolute;
  z-index: 2;
  right: calc(var(--bank-w) * -0.42);
  bottom: 0;
  width: var(--bank-w);
  height: auto;
  overflow: visible;
}

.sand { fill: var(--sand); }
.rock { fill: var(--rock); }
.cast { fill: var(--cast); opacity: 0.16; }
.weed-1 { fill: var(--weed-1); }
.weed-2 { fill: var(--weed-2); }
.glint { fill: var(--sun-core); opacity: 0.6; }

/* kona, floating on their back in the sea, in front of the sun path.
   geometry is in % of kona's box; the waterline ellipse is centered at 52% / 74% */
.kona-float {
  position: absolute;
  z-index: 3;
  left: calc(100% * var(--kona-xf) - var(--kona-w) / 2);
  bottom: var(--kona-b);
  width: var(--kona-w);
  height: calc(var(--kona-w) * 1.03);
}

.kona-shade {
  position: absolute;
  left: 12.5%;
  top: 70%;
  width: 89%;
  height: 20%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--water-shade), transparent);
  opacity: 0.45;
}

.kona-img {
  position: absolute;
  inset: 0;
  display: block;
  animation: kona-bob 6s ease-in-out infinite;
}

.kona-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px var(--otter-shadow));
}

/* the sea surface in front of kona's lower body, below the waterline arc.
   it is painted with the same sea gradient, lined up with the scene (left edge sits at
   kona-xf * scene width - 0.63 * kona-w), so the tail and belly sink into matching water */
.kona-water {
  position: absolute;
  left: -13%;
  top: 74%;
  width: 130%;
  height: 32%;
  opacity: 0.88;
  background-image: linear-gradient(90deg, var(--sea-1) 0%, var(--sea-2) 70%, var(--sea-3) 100%);
  background-size: 100vw 100%;
  background-repeat: no-repeat;
  background-position: calc(var(--kona-w) * 0.63 - 100vw * var(--kona-xf)) 0;
  -webkit-mask-image: radial-gradient(ellipse 41.5% 37.5% at 50% 0%, transparent 98%, #000 100%), linear-gradient(180deg, transparent 0%, #000 62%, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(ellipse 41.5% 37.5% at 50% 0%, transparent 98%, #000 100%), linear-gradient(180deg, transparent 0%, #000 62%, #000 82%, transparent 100%);
  mask-composite: intersect;
  pointer-events: none;
}

.kona-waterline {
  position: absolute;
  left: -2%;
  top: 62%;
  width: 108%;
  height: 24%;
  overflow: visible;
  pointer-events: none;
}

.kona-waterline path {
  fill: none;
  stroke: var(--ripple);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.75;
  vector-effect: non-scaling-stroke;
}

/* gold ripple rings on the open water around kona. each ring is drawn twice:
   the back half behind kona, the front half on the water in front of kona */
.ripple {
  position: absolute;
  left: 52%;
  top: 74%;
  border: 2px solid var(--ripple);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: ripple 6s ease-in-out infinite;
}

.ripple--outer {
  width: 158%;
  height: 40%;
  opacity: 0.42;
}

.ripple--inner {
  width: 132%;
  height: 31%;
  opacity: 0.6;
  animation-delay: -3s;
}

.ripple--back {
  clip-path: inset(0 0 50% 0);
}

.ripple--front {
  clip-path: inset(50% 0 0 0);
}

@keyframes kona-bob {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(4px);
  }
}

@keyframes ripple {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(0.97);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.03);
  }
}

@media (max-width: 760px) {
  .cave {
    display: none;
  }
}

@media (max-width: 640px) {
  .hero {
    --kona-w: 30vw;
    --kona-xf: 0.64;
    --kona-b: 12px;
    --scene-h: calc(var(--kona-w) * 1.03 + 92px);
    --bank-w: 58vw;
    --wave-h: 22px;
    --sun-x: 78%;
    border-radius: 0 0 28px 28px;
  }

  .home .site-header {
    padding-top: 1.25rem;
  }

  .brand {
    font-size: 1.375rem;
    gap: 8px;
  }

  .brand-dot {
    width: 12px;
    height: 12px;
  }

  .clouds {
    top: 70px;
    left: auto;
    right: 4%;
    width: 120px;
  }

  .eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
  }

  .hero h1 {
    margin-bottom: 1rem;
  }

  .hero .sub {
    margin-bottom: 1.25rem;
  }

  .signup label {
    font-size: 1.125rem;
  }

  .bank {
    right: auto;
    left: calc(var(--bank-w) * -0.3);
  }

  .ripple {
    border-width: 1.5px;
  }

  .kona-img img {
    filter: drop-shadow(0 3px 5px var(--otter-shadow));
  }
}

/* feature blurbs */
.features {
  list-style: none;
  padding: 0;
  margin: 3.5rem 0 0;
  display: grid;
  gap: 1rem;
}

.features li {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 1.5rem 1.5rem 1.375rem;
  margin: 0;
}

.feature-art {
  display: flex;
  align-items: flex-end;
  height: 96px;
  margin-bottom: 1rem;
}

.feature-art img {
  width: auto;
  height: 96px;
}

.feature-art--wide img {
  width: 124px;
  height: auto;
}

.features h2 {
  font-size: 1.375rem;
  margin: 0 0 0.35em;
}

.features p {
  color: var(--ink-soft);
  margin: 0;
}

@media (min-width: 760px) {
  .features {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
}

/* long-form pages (privacy, support) */
.prose h1 {
  margin-bottom: 0.25em;
}

.prose .meta {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--muted);
  font-size: 1.0625rem;
  margin-bottom: 2rem;
}

.prose h2 {
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  margin-top: 2rem;
}

.prose h2:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.faq dt {
  font-weight: 700;
  margin-top: 1.25rem;
}

.faq dd {
  margin: 0.25rem 0 0;
  color: var(--ink-soft);
}

.note {
  background: var(--surface);
  border-left: 4px solid var(--accent);
  border-radius: 18px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}

.note p:last-child {
  margin-bottom: 0;
}

/* footer */
.site-footer {
  border-top: 1px solid var(--line);
  padding-top: 1.75rem;
  padding-bottom: 2.5rem;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.site-footer .wrap {
  display: grid;
  gap: 0.75rem;
}

.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

.site-footer li {
  margin: 0;
}

.site-footer a {
  color: var(--ink-soft);
}

.site-footer a:hover {
  color: var(--ink);
}

.site-footer .social span {
  color: var(--muted);
}

.site-footer .copy {
  color: var(--muted);
  margin: 0;
}

/* motion: kona's bob and the ripples stop when reduced motion is on */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  .kona-img,
  .ripple {
    animation: none;
  }
}