/* No Shortcuts: coming-soon page
   Brand colours and fonts live here as variables so they are easy to find.
   Everything scales with the window: the route line always runs edge to edge,
   the title and buttons grow and shrink with the screen. */

:root {
  --ink: #161412;        /* black background */
  --cream: #FBE9D7;      /* main text */
  --persimmon: #E8593D;  /* accent: "Short", the mark, the route */
  --peach: #F4C8AB;      /* soft labels */
  --gray: #8C8681;       /* quiet text */

  --font-headline: "Petrona", Georgia, "Times New Roman", serif;
  --font-body: "Bricolage Grotesque", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --gutter: clamp(20px, 4.5vw, 80px);                     /* space from the screen edges */
  --title-size: clamp(2.4rem, min(9.5vw, 16vh), 14rem);  /* overridden from config if set */
  --ui-size: clamp(0.8rem, min(1.15vw, 2.2vh), 1.1rem);  /* tagline and buttons */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--ink);
  color: var(--cream);
}

body {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* the route line's tails run off both edges on purpose */
}

/* The page is a column: title at the top, route line in the middle, buttons at the bottom.
   It always fills exactly one screen. */
.page {
  height: 100vh;
  height: 100svh; /* phones: the real visible height, below the browser bar */
  display: flex;
  flex-direction: column;
  padding-top: max(calc(var(--gutter) * 0.8), env(safe-area-inset-top));
  padding-bottom: max(var(--gutter), env(safe-area-inset-bottom));
}

.top {
  flex: 0 0 auto;
  padding: 0 var(--gutter);
}

/* "No Shortcuts" with the mark raised like an asterisk */
.title {
  margin: 0;
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: var(--title-size);
  line-height: 0.95;
  letter-spacing: -0.015em;
  color: var(--cream);
  white-space: nowrap;
}

.title em {
  font-style: italic;
  color: var(--persimmon);
}

.title .mark {
  display: inline-block;
  width: 0.42em;
  height: 0.42em;
  margin-left: 0.06em;
  vertical-align: 0.62em; /* raised, like an asterisk */
  color: var(--persimmon);
  overflow: visible;
}

.tagline {
  margin: clamp(8px, 1.4vh, 20px) 0 0;
  font-family: var(--font-mono);
  font-size: var(--ui-size);
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--peach);
}

/* The route line takes all the space between title and buttons, and runs edge to edge.
   Its height follows the window, but on narrow screens it is kept from getting too spiky. */
.route {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  padding: clamp(12px, 3vh, 40px) 0;
}

.route-line {
  display: block;
  width: 100%;
  height: min(100%, 55vw);
  overflow: visible; /* lets the short tails run past both edges */
}

.route-line path {
  fill: none;
  stroke: var(--persimmon);
  stroke-width: 2.5px;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke; /* same thickness whatever the stretch */
}

/* Draws the line in from left to right when the page opens */
.route-line path.draw {
  animation: route-draw 2.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes route-draw {
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .route-line path.draw {
    animation: none;
    stroke-dashoffset: 0 !important;
  }
}

/* Three small outlined buttons along the bottom: Listen, See, Consider */
.links {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em clamp(10px, 1.2vw, 18px);
  padding: 0 var(--gutter);
  font-family: var(--font-mono);
  font-size: var(--ui-size);
  letter-spacing: 0.08em;
}

.links a {
  color: var(--cream);
  text-decoration: none;
  border: 1px solid rgba(251, 233, 215, 0.4);
  border-radius: 999px;
  padding: 0.55em 1.2em;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.links a:hover,
.links a:focus-visible {
  color: var(--ink);
  background: var(--persimmon);
  border-color: var(--persimmon);
  outline: none;
}

.links a:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 3px;
}

.links .email {
  color: var(--peach);
  border-color: transparent;
  padding-left: 0;
}