/* Reset */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

/* Base */
html, body {
  background: #ffffff;
  font-family: ui-sans-serif, system-ui, -apple-system,
               BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
  color: #111111;
}

/* Full-viewport background (safe-area compatible) */
.bg {
  position: fixed;

  top: calc(-1 * env(safe-area-inset-top, 0px));
  right: calc(-1 * env(safe-area-inset-right, 0px));
  bottom: calc(-1 * env(safe-area-inset-bottom, 0px));
  left: calc(-1 * env(safe-area-inset-left, 0px));

  z-index: 0;

  background-image: url("background.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

  transform: translateZ(0);
}

/* Center layout */
.hero {
  position: relative;
  z-index: 1;

  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;

  display: grid;
  place-items: center;
  text-align: center;
  padding: 20px;

  padding-top: calc(20px + env(safe-area-inset-top, 0px));
  padding-right: calc(20px + env(safe-area-inset-right, 0px));
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  padding-left: calc(20px + env(safe-area-inset-left, 0px));
}

/* Landing stack */
.stack {
  display: grid;
  justify-items: center;
  gap: 0px;
}

/* Logo */
.logo {
  width: clamp(280px, 70vw, 560px);
  height: auto;
  display: block;
  margin: 0;
}

/* Homepage links (tucked) */
.links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px;

  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;

  margin-top: -2px;
}

.links a {
  text-decoration: none;
  color: inherit;
  padding: 0;
  line-height: 1.2;
}

.links a:hover {
  opacity: 0.6;
}

/* Message pages (Shop / Bookings / Thank You) */
.message {
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: 10px;
  max-width: 720px;
}

.headline {
  margin: 0;
  font-size: clamp(22px, 4vw, 34px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.subhead {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.06em;
}

/* Remove button styling — make them clean text links */
.btn {
  display: inline-block;
  margin-top: 6px;

  text-decoration: none;
  color: inherit;

  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.btn:hover {
  opacity: 0.6;
}

.arrow {
  font-size: 12px;
}