/* ============================================================
   GMDS · project.css

   The two project pages, Web2Sales and SuppAI. Loaded only by them.

   One screen each: the bar, a paragraph, the sentence the paragraph is
   leading to, and one way out. Nothing scrolls except into the footer.

   This page used to be long — screenshot, four numbered claims, a visit
   block, a link to the other project. All of it was true and none of it was
   read, because a visitor who clicks a product name has already decided to
   look at the product; everything between them and the live site is delay.
   So the page is now the shortest honest version of itself: say what the
   thing is for, then open the door.
   ============================================================ */

/* --- the screen --------------------------------------------------------

   Vertically centred, horizontally left. Centring the text as well would
   make a poster; left-aligned inside a centred column keeps the ragged
   right edge that the rest of the site reads with, and lines the first
   letter of every line up with the footer's mark directly below it.

   svh, not vh: on a phone vh is the tallest the viewport ever gets, so a
   100vh screen is always taller than the visible area while the address bar
   is showing, and the CTA sits under it.
   ---------------------------------------------------------------------- */

main.proj {
  position: relative; z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  max-width: 78rem;
  margin: 0 auto;
  /* The top pad clears the fixed bar. It is padding rather than margin so it
     counts inside the flex box doing the centring: with a margin the text
     centres on the whole screen and then gets pushed down, which reads low. */
  padding: clamp(7rem, 16vh, 10rem) clamp(1.2rem, 5vw, 4rem) clamp(4rem, 10vh, 7rem);
}

/* --- the name ----------------------------------------------------------

   Large, because on a page this empty the only thing that can carry weight
   is the type. The full stop is deliberate: it makes the product name a
   statement rather than a label waiting for the rest of a sentence.
   ---------------------------------------------------------------------- */

.proj__title {
  margin: 0 0 clamp(1.6rem, 4vh, 2.6rem);
  font-size: clamp(3rem, 9vw, 7rem);
  font-weight: 800; font-stretch: 118%;
  line-height: 0.92;
  letter-spacing: -0.04em;
}

/* --- the argument ------------------------------------------------------ */

/* The setting-up paragraph: what changed in the world, and what that leaves
   businesses needing. Dimmer than the claim under it, because it is the
   premise and not the conclusion. */
.proj__lede {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.65;
  color: var(--paper-dim);
  text-wrap: pretty;
}

/* The conclusion. One size up, full brightness, and a shorter measure so it
   breaks into two or three lines and reads as a statement rather than as a
   third paragraph of the same voice. */
.proj__claim {
  margin: clamp(1.4rem, 3.5vh, 2.2rem) 0 0;
  max-width: 34ch;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.018em;
  color: var(--paper);
  text-wrap: balance;
}
.proj__claim b { color: var(--scarlet); font-weight: 800; }

/* --- the way out -------------------------------------------------------

   One button, once. The old page offered the live site three times — a
   visit block, a footer CTA and the other project — and three doors in one
   room is a room nobody crosses.
   ---------------------------------------------------------------------- */

.proj__visit {
  display: inline-flex; align-items: center; gap: 0.7rem;
  margin-top: clamp(2.2rem, 6vh, 3.4rem);
  padding: 1rem 1.7rem;
  background: var(--violet);
  color: var(--void); text-decoration: none;
  font-size: 0.82rem; font-weight: 800;
  letter-spacing: 0.12em; text-indent: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 var(--violet-edge);
  transition: background 220ms var(--ease-out), transform 200ms var(--ease-out);
}
.proj__visit:hover { background: var(--violet-lit-b); }
.proj__visit:active { transform: translateY(1px); background: var(--violet-press); }
/* text-indent tracks the label; the arrow would inherit it and sit adrift. */
.proj__visit span[aria-hidden] { text-indent: 0; }

/* The arrow leans out on hover. Two pixels, and only on a pointer that can
   hover, so a touch screen never sees a half-finished transition. */
@media (hover: hover) {
  .proj__visit span[aria-hidden] {
    transition: transform 220ms var(--ease-out);
  }
  .proj__visit:hover span[aria-hidden] { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .proj__visit,
  .proj__visit span[aria-hidden] { transition: none; }
  .proj__visit:hover span[aria-hidden] { transform: none; }
}