/* ==========================================================================
   Workspace Welcome — Figma 800:18046 / 800:18047

   Two centred lines above the composer: the reader's name, then the question.
   Set in Libre Baskerville at 30.429/‑0.6086, with the name alone in Platypi
   Italic and the deep green the design reserves for it.

   Reusable — namespaced .ws-welcome, no dependency on the Home layout.
   ========================================================================== */

.ws-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 460px;
  max-width: 100%;
  text-align: center;
}

/* Figma sets each line in a box exactly the type size tall — no leading. The
   height is held on the block rather than left to the line box, because the
   italic beside the serif has a taller ascent and would otherwise grow the
   line and push the composer down. Glyphs still paint outside the box. */
.ws-welcome__line {
  display: block;
  margin: 0;
  width: 100%;
  height: 26px;
  font-family: "Libre Baskerville", Georgia, serif;
  font-weight: 400;
  font-size: 25px;
  line-height: 26px;
  letter-spacing: -0.5px;
  color: #24252d;
}

/* The comma belongs to the greeting, not to the name — Figma sets it a shade
   back so the name lands as the accent. */
.ws-welcome__comma {
  color: rgba(36, 37, 45, 0.84);
}

.ws-welcome__name {
  font-family: Platypi, "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  line-height: inherit;
  color: #1b5029;
}

.ws-welcome__line[hidden] {
  display: none;
}

/* Libre Baskerville has no descender clearance at line-height 1; the box is
   exactly the type size in Figma, so nothing is clipped at these sizes. Below
   the artboard the pair steps down together and keeps its proportion. */
@media (max-width: 1200px) {
  .ws-welcome__line {
    height: 27px;
    font-size: 27px;
    line-height: 27px;
    letter-spacing: -0.54px;
  }
}

@media (max-width: 820px) {
  .ws-welcome {
    width: 100%;
  }
  /* The greeting can wrap on a phone, so the fixed line box is released. */
  .ws-welcome__line {
    height: auto;
    font-size: 22px;
    line-height: 1.25;
    letter-spacing: -0.44px;
  }
}