/* ============================================================
   COUTURE & CODE — coming soon page

   Layered on top of couture-code.css, which supplies the brand
   tokens, the three type faces and the shared components
   (.wordmark, .display, .strapline, .notify, .eyebrow).
   Nothing here redefines a colour or a size — it only composes
   what the main stylesheet already establishes.
   ============================================================ */

/* The surround takes the oxblood tint so the ivory card lifts off it,
   rather than the two matching and relying on the hairline alone. */
.soon {
  min-height: 100svh;
  display: flex;
  background: var(--tint);
}

/* Hairline border framing the whole page, echoing the offset
   frames used around the portraits and the book cover. */
.soon-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 2.5vw, 28px);
}

.soon-inner {
  width: 100%;
  max-width: 720px;
  text-align: center;
  border: 1px solid var(--hairline);
  background: var(--ivory);
  padding: clamp(32px, 4vw, 48px) clamp(24px, 5vw, 64px);
}

/* ---------- lockup ---------- */

/* Inline rather than flex, so the lockup centres and wraps naturally;
   the script and serif words align on their shared baseline. */
.soon-title {
  font-size: clamp(40px, 6vw, 56px);
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
}

.soon-title .couture-word {
  font-family: var(--script);
  font-size: calc(1em * var(--script-boost));
  font-weight: 400;
  color: var(--red);
  line-height: 0.9;
}

.soon-title .amp {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: inherit;
}

/* Sized to hold on one line inside the card, so the diamond stays
   between the two halves rather than stranded at a line end. */
.soon-strapline {
  margin-top: 16px;
  font-size: clamp(15px, 2.6vw, 22px);
}

/* ---------- divider ---------- */

.soon-rule {
  width: 64px;
  height: 1px;
  border: 0;
  background: var(--red);
  opacity: 0.5;
  margin: 26px auto;
}

/* ---------- copy ---------- */

.soon-quote {
  max-width: none;
  margin: 0 auto;
  text-wrap: balance;
}

.soon-intro {
  margin-top: 18px;
  color: var(--stone);
  max-width: 46ch;
  margin-inline: auto;
  text-wrap: pretty;
}

/* The shared .eyebrow draws a trailing rule and left-aligns via
   flex — centre it and give it a rule on both sides instead. */
.soon-eyebrow {
  justify-content: center;
  margin-top: 30px;
}

.soon-eyebrow::before {
  content: "";
  height: 1px;
  width: 64px;
  background: currentColor;
  opacity: 0.5;
}

/* ---------- subscribe call to action ---------- */
/* There is no mailing list of our own yet, so the page hands sign-ups
   straight to Substack rather than collecting addresses it cannot store. */

.soon-sub {
  margin: 16px auto 0;
  max-width: 42ch;
  color: var(--stone);
  text-wrap: pretty;
}

.soon-cta { margin-top: 20px; }

/* ---------- footer ---------- */

.soon-book {
  margin-top: 30px;
  font-size: var(--fs-small);
  color: var(--stone);
}

.soon-book i { font-family: var(--serif); font-size: var(--fs-body); }

.soon-links {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}

.soon-links ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}

.soon-links a {
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: var(--wt-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.soon-links a:hover { color: var(--red); border-bottom-color: var(--red); }

.soon-base {
  margin-top: 14px;
  font-size: var(--fs-small);
  color: var(--stone);
}

/* ---------- responsive ---------- */
/* The scale tokens already step down at these widths; only the
   lockup needs to be released from its single line. */

@media (max-width: 760px) {
  .soon-title { white-space: normal; }
  /* The shared .strapline switches to a justified flex row at this
     width for the full-bleed band; inside this narrow card it should
     stay a plain centred line. */
  .soon-strapline {
    display: block;
    white-space: normal;
    line-height: 1.4;
  }
  .soon-links ul { gap: 20px; }
}