/* Tugbond coming-soon page. Tokens mirror design/tokens/tokens.json (Figma). Light only: the brand is cream yarn board. */
@font-face {
  font-family: "Fredoka";
  src: url("/fonts/Fredoka-Variable.ttf") format("truetype");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("/fonts/Nunito-Variable.ttf") format("truetype");
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  --cream-50: #FFFBF5;
  --cream-100: #FFF3E2;
  --cream-200: #F7E6CC;
  --cream-300: #E9D3B3;
  --coral-500: #FF7A59;
  --coral-700: #C44A2C;
  --teal-500: #1FB6A6;
  --teal-700: #117B70;
  --yellow-500: #FFC93C;
  --navy-500: #5C607A;
  --navy-700: #3E4159;
  --navy-900: #2B2D42;
  --display: "Fredoka", "Nunito", system-ui, sans-serif;
  --body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  background:
    radial-gradient(circle at 1px 1px, rgba(43, 45, 66, 0.07) 1px, transparent 0) 0 0 / 22px 22px,
    var(--cream-100);
  color: var(--navy-900);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.55;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}

.page {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding-block: 28px 12px;
}

@media (min-width: 900px) {
  .page {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 40px;
    padding-block: 48px 24px;
  }
}

.copy { min-width: 0; max-width: 34rem; }

@media (max-width: 899px) {
  .copy { order: 2; }
  .map { order: 1; }
}

.wordmark {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(56px, 11vw, 112px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  color: var(--navy-900);
}

.lead {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.3;
  margin: 0 0 26px;
  color: var(--navy-700);
  text-wrap: balance;
}

.points {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: grid;
  gap: 12px;
}

.points li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: baseline;
  gap: 10px;
}

.knot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transform: translateY(1px);
  box-shadow: inset -2px -2px 0 rgba(43, 45, 66, 0.18);
}
.knot-coral { background: var(--coral-500); }
.knot-teal { background: var(--teal-500); }
.knot-yellow { background: var(--yellow-500); }

.soon {
  display: inline-block;
  margin: 0;
  font-weight: 700;
  color: var(--navy-900);
  background: var(--cream-50);
  border: 2px solid var(--navy-900);
  border-radius: 999px;
  padding: 8px 18px;
  box-shadow: 3px 3px 0 var(--navy-900);
}

.map { margin: 0; min-width: 0; }

.map svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 62svh;
  touch-action: manipulation;
}

.map figcaption {
  font-size: 14px;
  color: var(--navy-500);
  text-align: center;
  margin-top: 4px;
}

.foot {
  max-width: 1120px;
  width: 100%;
  margin: 0 auto;
  padding: 18px 0 26px;
  border-top: 2px dashed var(--cream-300);
  font-size: 14px;
  color: var(--navy-500);
}
.foot p { margin: 4px 0; max-width: 70ch; }

/* SVG parts drawn by net.js */
.rope { fill: none; stroke-linecap: round; stroke-width: 4; }
.ball { cursor: pointer; }
.ball:focus-visible { outline: none; }
.ball:focus-visible .ring { stroke: var(--navy-900); stroke-width: 3; }
.stitch { fill: none; stroke: rgba(43, 45, 66, 0.28); stroke-width: 2; stroke-linecap: round; }
.spark { fill: var(--yellow-500); stroke: var(--navy-900); stroke-width: 2; }