/* Backs & Bits — the business card, repainted as a page.
   Front of the card is the first screen, back of the card is the second,
   and the sand carries on underneath for bookings. */

:root {
  --sand: #f3b144;
  --sand-low: #e6a440;
  --sand-streak: #f8c963;
  --navy: #22375a;
  --ink: #1d130d;
  --paint-white: #fbf6e6;

  --logo: "Darumadrop One", "Chalkboard SE", "Comic Sans MS", cursive;
  --script: "Kaushan Script", "Brush Script MT", cursive;
  --brush: "Caveat Brush", "Bradley Hand", "Segoe Print", cursive;
  --serif: Tinos, "Times New Roman", Times, serif;

  --gutter: clamp(16px, 5vw, 40px);
  --wave-h: clamp(48px, 8vw, 116px);
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--sand-low);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
  line-height: 1.55;
  overflow-x: hidden;
}

/* Horizontal brush streaks over the whole painting */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: .55;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='600'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.11' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  1.6 0 0 0 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 900px 600px;
}

.defs { position: absolute; }

a { color: inherit; text-underline-offset: .15em; text-decoration-thickness: .08em; }
a:focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; border-radius: 6px; }

p { margin: 0 0 1em; }

h2 {
  font-family: var(--brush);
  font-weight: 400;
  font-size: clamp(2.3rem, 1.6rem + 3vw, 3.5rem);
  line-height: 1.05;
  margin: 0 0 .3em;
  text-wrap: balance;
}

/* The painting behind each face. Oversized so the brushed edges never show a gap. */
.paint {
  position: absolute;
  inset: -24px;
  width: calc(100% + 48px);
  height: calc(100% + 48px);
  filter: url(#brush);
}

/* ---------- Front of the card ---------- */

.front {
  --h: max(100svh, 600px);
  position: relative;
  height: var(--h);
  overflow: hidden;
  background: #8fd6ca;
}

/* Card-shaped stage. Vertical positions are % of its height so the lettering
   sits on the same painted bands as the card; sizes follow its width. */
.face {
  position: relative;
  container-type: size;
  width: min(100vw, 640px, calc(var(--h) * 11 / 18));
  height: 100%;
  margin-inline: auto;
}
.face > *, .face h1 > * { position: absolute; margin: 0; }
.face h1 { position: static; font: inherit; }

.cloud { top: 1cqh; right: 0; width: 38cqw; }
.gulls {
  top: 5cqh; right: 8cqw; width: 23cqw;
  fill: none; stroke: var(--navy); stroke-width: 1.7; stroke-linecap: round;
}

.place {
  top: 10.5cqh; right: 12cqw;
  font: italic 700 7.6cqw/1.2 var(--serif);
  color: var(--navy);
}

.logo {
  font-family: var(--logo);
  font-size: 17.5cqw;
  line-height: 1;
  letter-spacing: .07em;
  color: var(--navy);
  -webkit-text-stroke: .24em var(--paint-white);
  paint-order: stroke fill;
  stroke-linejoin: round;
  filter: url(#rough);
  white-space: nowrap;
}
.logo i, .therapeutic i {
  display: inline-block;
  font-style: normal;
  transform: translateY(var(--y, 0)) rotate(var(--r, 0deg));
}
.logo i { position: relative; }
/* second coat of navy, so the letters are as chunky as the painted ones */
.logo i::after {
  content: attr(data-l);
  position: absolute;
  left: 0; top: 0;
  -webkit-text-stroke: .075em var(--navy);
}
.backs { top: 14.5cqh; left: 6cqw; }
.bits { top: 26cqh; right: 5cqw; }

.amp {
  top: 24.5cqh; left: 21cqw;
  font: italic 400 28cqw/1 var(--serif);
  color: var(--paint-white);
  transform: rotate(-8deg);
  filter: url(#rough);
}

.therapeutic {
  top: 44.5cqh; left: 0; width: 100%;
  text-align: center;
  padding-left: 8cqw;
  font: 7.4cqw/1 var(--brush);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
/* Letters sag through the middle, following the underside of the wave */
.therapeutic i {
  --y: calc(var(--d) * var(--d) * -.034em);
  --r: calc(var(--d) * -3.4deg);
}

.remedial {
  top: 53.5cqh; left: 0; width: 100%;
  text-align: center;
  font: 12.4cqw/1 var(--script);
  color: var(--ink);
  transform: rotate(-4deg);
  white-space: nowrap;
}

.phone {
  top: 72cqh; left: 0; width: 100%;
  text-align: center;
  font: 14.5cqw/1 var(--script);
  white-space: nowrap;
}
.phone a { text-decoration: none; display: inline-block; transform: rotate(-1.5deg); }
.phone a:hover { text-decoration: underline; text-decoration-thickness: .05em; }

.weekends { font: italic 700 1.3em/1.2 var(--serif); }
.face .weekends {
  top: 81.5cqh; left: 0; width: 100%;
  text-align: center;
  font-size: 6.4cqw;
}

/* ---------- Back of the card ---------- */

.back {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 8vw, 96px) var(--gutter) calc(var(--wave-h) + clamp(32px, 5vw, 64px));
  text-align: center;
  background: #d2e6dc;
}

.wrap {
  position: relative;
  max-width: 40rem;
  margin-inline: auto;
}

.back h2 { font-size: clamp(2.8rem, 1.8rem + 4.4vw, 4.5rem); }

.brushline {
  font-family: var(--brush);
  font-size: clamp(2rem, 1.5rem + 2.4vw, 3rem);
  line-height: 1.1;
  margin: 0 0 .5em;
}
.brushline.small { font-size: clamp(1.7rem, 1.4rem + 1.6vw, 2.4rem); margin-bottom: .25em; }
.brushline a { text-decoration: none; }
.brushline a:hover { text-decoration: underline; }

.intro { max-width: 34rem; margin: 0 auto 2.2em; }

.treatments { margin: 0 0 2.6em; display: grid; gap: 1.5em; }
.treatments dt {
  font-family: var(--brush);
  font-size: clamp(2rem, 1.5rem + 2.4vw, 3rem);
  line-height: 1.1;
}
.treatments dd { margin: .15em 0 0; }

/* ---------- Booking, on the sand ---------- */

.sand {
  position: relative;
  padding: clamp(20px, 3vw, 40px) var(--gutter) clamp(28px, 4vw, 48px);
  text-align: center;
  background: linear-gradient(var(--sand), var(--sand-low));
}

.wave {
  position: absolute;
  left: 0;
  bottom: calc(100% - 26px);
  width: 100%;
  height: var(--wave-h);
  overflow: visible;
  fill: var(--sand);
  filter: url(#brush);
  pointer-events: none;
}
.wave .streak { fill: var(--sand-streak); }

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 1.2em 0 0;
}

/* Buttons borrow the logo lettering: navy paint with a white painted outline */
.btn {
  display: inline-block;
  padding: .3em 1em .38em;
  font-family: var(--brush);
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem);
  line-height: 1.2;
  text-decoration: none;
  color: var(--paint-white);
  background: var(--navy);
  border: 4px solid var(--paint-white);
  border-radius: 58% 42% 55% 45% / 52% 48% 56% 44%;
  box-shadow: 0 6px 14px -8px rgba(34, 55, 90, .7);
  transition: transform .15s ease;
}
.btn-light { color: var(--navy); background: var(--paint-white); border-color: var(--navy); }
.btn:hover { transform: rotate(-1.5deg) scale(1.03); }
.btn:active { transform: scale(.98); }

.near { margin-top: 1.5em; font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem); }

footer.wrap {
  margin-top: clamp(40px, 6vw, 72px);
  padding-top: 1.2em;
  border-top: 2px solid rgba(29, 19, 13, .35);
  font-size: .85em;
}
footer p { margin: 0; }

/* ---------- One bit of motion: a wiggle runs through the lettering ---------- */

@media (prefers-reduced-motion: no-preference) {
  /* Uses the standalone rotate/translate properties so each letter keeps its own painted tilt */
  .logo i { animation: jiggle 7s ease-in-out infinite both; animation-delay: calc(var(--n, 0) * 90ms + 400ms); }
  .backs i:nth-child(2) { --n: 1; } .backs i:nth-child(3) { --n: 2; }
  .backs i:nth-child(4) { --n: 3; } .backs i:nth-child(5) { --n: 4; }
  .bits i:nth-child(1) { --n: 6; } .bits i:nth-child(2) { --n: 7; }
  .bits i:nth-child(3) { --n: 8; } .bits i:nth-child(4) { --n: 9; }
  @keyframes jiggle {
    0%, 14%, 100% { rotate: 0deg; translate: 0 0; }
    2.5% { rotate: -5deg; translate: 0 -.05em; }
    5.5% { rotate: 4deg; translate: 0 .01em; }
    8.5% { rotate: -2.5deg; translate: 0 -.02em; }
    11.5% { rotate: 1.2deg; translate: 0 0; }
  }
}