/* Hallmark · genre: modern-minimal · macrostructure: Marquee Hero · theme: Quavern custom · enrichment: existing mark · nav: N9 · footer: Ft2
 * THESIS: A commissioning notice for a studio not yet public; it refuses the centred countdown-and-email template.
 * OWN-WORLD: Limestone field, rail ink, one amber contact, Lineal display, Atkinson copy, square junctions and hard rules.
 * STORY: Quavern is forming in Bordeaux, names its working field, and offers one direct contact without inventing a launch date.
 * FIRST VIEWPORT: Edge nav above a bottom-weighted two-line slogan; the constructed Q occupies the upper-right datum.
 * FORM: Signal Hatch, third grounded structure, seed d6a07bf1.
 * contrast: pass (40–41) · nav: N9 · footer: Ft2 · slop: pass (42–45)
 * honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30)
 * mobile: pass (34, 49, 50–57) · studied: no · context: established Quavern world · v0.8.0
 */
/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 */

.coming-page {
  min-height: 100dvh;
  background: var(--color-paper);
  color: var(--color-ink);
}

.coming-nav {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-sticky);
  display: flex;
  min-height: 5rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-inline: clamp(var(--space-4), 4vw, var(--space-8));
  border-bottom: var(--border-thin) solid var(--color-ink);
}

.coming-wordmark,
.coming-contact,
.coming-register-link {
  display: inline-flex;
  min-height: var(--control-height);
  align-items: center;
  white-space: nowrap;
}

.coming-wordmark img {
  display: block;
  width: clamp(7.5rem, 13vw, 10.5rem);
  height: auto;
}

.coming-nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.language-toggle--compact {
  flex: 0 0 auto;
}

.coming-contact,
.coming-register-link {
  gap: var(--space-3);
  font-weight: 800;
  text-decoration-color: currentColor;
  text-decoration-line: underline;
  text-decoration-thickness: var(--border-heavy);
  text-underline-offset: 0.14em;
}

.coming-contact-arrow {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-out);
}

.coming-contact-label--short {
  display: none;
}

.coming-marquee {
  position: relative;
  display: grid;
  min-height: 100svh;
  align-content: end;
  padding: clamp(8rem, 18vh, 12rem) clamp(var(--space-4), 4vw, var(--space-8)) clamp(var(--space-7), 7vh, var(--space-9));
  border-bottom: var(--border-heavy) solid var(--color-ink);
  overflow: clip;
}

.coming-datum {
  position: absolute;
  inset-block-start: clamp(6.75rem, 13vh, 9rem);
  inset-inline: clamp(var(--space-4), 4vw, var(--space-8));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  color: var(--color-ink-soft);
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.coming-datum p {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.coming-contact-point {
  width: var(--space-3);
  height: var(--space-3);
  flex: 0 0 auto;
  background: var(--color-contact);
}

.coming-q {
  position: absolute;
  inset-block-start: clamp(9rem, 20vh, 12rem);
  inset-inline-end: clamp(var(--space-4), 5vw, var(--space-10));
  width: clamp(10rem, 24vw, 22rem);
  height: auto;
  animation: coming-q-settle var(--dur-settle) var(--ease-out) both;
}

.coming-title {
  position: relative;
  z-index: var(--z-raised);
  max-width: 10ch;
  font-family: var(--font-display);
  font-size: clamp(3.35rem, 8vw, 5.5rem);
  font-style: normal;
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 0.88;
  overflow-wrap: normal;
  word-break: keep-all;
}

.coming-title span {
  display: block;
}

.coming-register {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(var(--space-8), 10vw, var(--space-10));
  padding: clamp(var(--space-8), 10vw, var(--space-10)) clamp(var(--space-4), 4vw, var(--space-8));
  background: var(--color-depth);
  color: var(--color-depth-text);
}

.coming-register-intro {
  display: grid;
  align-content: start;
  gap: var(--space-6);
}

.coming-register h2 {
  max-width: 10ch;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4.75rem);
  font-style: normal;
  font-weight: 900;
  hyphens: none;
  letter-spacing: -0.03em;
  line-height: var(--line-tight);
  overflow-wrap: normal;
  word-break: keep-all;
}

.coming-register-intro p {
  max-width: 48ch;
  color: var(--color-plane);
  font-size: var(--step-1);
  line-height: 1.45;
}

.coming-register-link {
  justify-self: start;
  color: var(--color-depth-text);
}

.coming-status-list {
  margin: 0;
  border-top: var(--border-heavy) solid var(--color-depth-text);
}

.coming-status-list > div {
  display: grid;
  grid-template-columns: minmax(7rem, 3fr) minmax(0, 5fr) minmax(8rem, 3fr);
  gap: var(--space-5);
  align-items: baseline;
  padding-block: var(--space-5);
  border-bottom: var(--border-thin) solid var(--color-plane);
}

.coming-status-list dt,
.coming-status-list dd {
  margin: 0;
}

.coming-status-list dt,
.coming-status-note {
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.coming-status-list dd:not(.coming-status-note) {
  font-size: var(--step-1);
  font-weight: 800;
}

.coming-status-note {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-plane);
}

.coming-status-note span {
  width: var(--space-2);
  height: var(--space-2);
  flex: 0 0 auto;
  background: var(--color-contact);
}

.coming-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-7);
  padding: var(--space-5) clamp(var(--space-4), 4vw, var(--space-8));
  border-top: var(--border-thin) solid var(--color-ink);
  font-size: var(--step--1);
  font-weight: 800;
}

@keyframes coming-q-settle {
  from {
    transform: translateY(var(--space-5));
  }

  to {
    transform: translateY(0);
  }
}

.coming-register-link:focus-visible {
  outline-color: var(--color-focus-on-dark);
}

@media (hover: hover) and (pointer: fine) {
  .coming-contact:hover .coming-contact-arrow,
  .coming-register-link:hover .coming-contact-arrow {
    transform: translate(0.18em, -0.18em);
  }
}

@media (max-width: 60rem) {
  .coming-register {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }
}

@media (max-width: 42rem) {
  .coming-nav {
    min-height: 4.5rem;
  }

  .coming-contact-label--long {
    display: none;
  }

  .coming-contact-label--short {
    display: inline;
  }

  .coming-marquee {
    min-height: 100svh;
    padding-block-end: var(--space-8);
  }

  .coming-datum {
    inset-block-start: 6rem;
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-2);
  }

  .coming-q {
    inset-block-start: 10rem;
    inset-inline-end: var(--space-4);
    width: min(46vw, 11rem);
  }

  .coming-title {
    font-size: clamp(3.35rem, 17vw, 4.75rem);
    line-height: 0.9;
  }

  .coming-register {
    padding-block: var(--space-8);
  }

  .coming-status-list > div {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }

  .coming-status-note {
    margin-top: var(--space-2);
  }

  .coming-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 23.5rem) {
  .coming-wordmark img {
    width: 7rem;
  }

  .coming-title {
    font-size: 3.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .coming-q {
    animation: none;
  }

  .coming-contact-arrow {
    transition-duration: 0.01ms;
  }
}