/* Jack & Olive — coming soon.
 * Ported from the "Jack & Olive Coming Soon" artboard; every clamp() below is
 * carried over verbatim from the design's inline styles. */

.jo-page {
  min-height: 100vh;
  box-sizing: border-box;
  padding: clamp(10px, 1.5vw, 24px);
  background: var(--jo-navy);
  background-image: radial-gradient(
    115% 85% at 50% 26%,
    var(--jo-navy-light) 0%,
    var(--jo-navy-mid) 48%,
    var(--jo-navy-deep) 100%
  );
  font-family: var(--jo-font-body);
  display: flex;
}

/* The hairline frame inset from the page edge. */
.jo-frame {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: clamp(16px, 4vh, 56px) clamp(22px, 5vw, 72px) clamp(14px, 3vh, 40px);
  border: 1px solid var(--jo-border);
  text-align: center;
  animation: joFade 1.1s ease both;
}

/* Centred content; the social row below is pinned out of this stack. */
.jo-stack {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.jo-mark {
  width: clamp(48px, min(10vw, 11vh), 128px);
  height: clamp(48px, min(10vw, 11vh), 128px);
  border-radius: 50%;
  border: 2px solid var(--jo-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(14px, 6vh, 68px);
  flex-shrink: 0;
  animation: joRise 0.9s ease both;
}

.jo-mark__text {
  font-family: var(--jo-font-display);
  font-size: clamp(16px, min(3.2vw, 3.6vh), 42px);
  color: var(--jo-cream);
  line-height: 1;
  display: inline-block;
  /* Optical centring for the ampersand inside the roundel. */
  transform: translate(0.095em, -0.09em);
}

.jo-title {
  font-family: var(--jo-font-display);
  font-weight: 400;
  font-size: clamp(38px, min(8.2vw, 13vh), 116px);
  line-height: 1;
  color: var(--jo-cream);
  margin: 0;
  letter-spacing: -0.005em;
  text-wrap: balance;
  animation: joRise 0.9s ease 0.08s both;
}

.jo-tagline {
  font-size: clamp(9.5px, min(1.05vw, 1.6vh), 14px);
  font-weight: 500;
  letter-spacing: clamp(2.4px, 0.85vw, 11px);
  line-height: 1.9;
  text-transform: uppercase;
  color: var(--jo-muted);
  margin-top: clamp(10px, 3.8vh, 42px);
  animation: joRise 0.9s ease 0.16s both;
}

/* Line — dot — line divider. */
.jo-rule {
  display: flex;
  align-items: center;
  gap: clamp(13px, 2vw, 24px);
  margin: clamp(14px, 6.5vh, 74px) 0 clamp(12px, 4.5vh, 48px);
  animation: joFade 1.2s ease 0.3s both;
}

.jo-rule__line {
  width: clamp(34px, 7vw, 92px);
  height: 1px;
}

.jo-rule__line--left {
  background: linear-gradient(to right, var(--jo-red-fade), var(--jo-red));
}

.jo-rule__line--right {
  background: linear-gradient(to left, var(--jo-red-fade), var(--jo-red));
}

.jo-rule__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--jo-red);
  flex-shrink: 0;
}

.jo-status {
  font-family: var(--jo-font-display);
  font-size: clamp(19px, min(2.5vw, 3.4vh), 33px);
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--jo-blush);
  animation: joRise 0.9s ease 0.24s both;
}

.jo-social {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(20px, 3vw, 36px);
  align-items: center;
  justify-content: center;
  padding-top: clamp(14px, 4vh, 48px);
  animation: joFade 1.2s ease 0.45s both;
}

.jo-social a {
  font-size: clamp(10px, 1vw, 11.5px);
  font-weight: 500;
  letter-spacing: 2.2px;
  text-transform: uppercase;
}