/* The Venta: coming-soon placeholder. Uses tokens.css roles only. */

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  font: var(--md-sys-typescale-body-large);
}

main {
  flex: 1;
  width: 100%;
  max-width: var(--venta-width-content);
  margin: 0 auto;
  padding: clamp(40px, 9vw, 112px) var(--venta-gutter) 0;
}

/* ---------- Hero ---------- */

.hero {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.hero__logo {
  margin: 0 0 clamp(28px, 4vw, 40px);
  color: var(--md-sys-color-primary);
  line-height: 0;
}
.hero__logo svg {
  width: clamp(200px, 30vw, 300px);
  height: auto;
}

.hero__tagline {
  margin: 0 0 16px;
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: var(--venta-tracking-tight);
  color: var(--md-sys-color-on-surface);
  text-wrap: balance;
}

.hero__sub {
  margin: 0 auto;
  max-width: 34ch;
  font-size: clamp(1.125rem, 1.6vw, 1.25rem);
  color: var(--md-sys-color-on-surface-variant);
  text-wrap: pretty;
}
.hero__soon {
  color: var(--md-sys-color-on-surface);
  font-weight: 500;
}

/* ---------- Story ---------- */

.story {
  max-width: var(--venta-width-reading);
  margin: clamp(72px, 12vw, 144px) auto 0;
  padding-top: clamp(40px, 6vw, 56px);
  border-top: 1px solid var(--md-sys-color-outline-variant);
}
.story h2 {
  margin: 0 0 16px;
  font: var(--md-sys-typescale-headline-medium);
  letter-spacing: var(--venta-tracking-tight);
}
.story em {
  font-style: italic;
  color: var(--md-sys-color-primary);
}
.story p {
  margin: 0 0 16px;
  color: var(--md-sys-color-on-surface-variant);
  text-wrap: pretty;
}
.story p:nth-last-child(2) { color: var(--md-sys-color-on-surface); }
.story .story__sig {
  margin-top: 24px;
  font: var(--md-sys-typescale-title-medium);
  font-style: italic;
  color: var(--md-sys-color-on-surface);
}

/* ---------- Footer ---------- */

.site-foot {
  padding: clamp(56px, 10vw, 96px) var(--venta-gutter) 32px;
  text-align: center;
}
.site-foot p {
  margin: 0;
  font: var(--md-sys-typescale-label-medium);
  color: var(--md-sys-color-on-surface-variant);
}
.site-foot a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .15em;
  text-decoration-color: var(--md-sys-color-outline-variant);
}
.site-foot a:hover { color: var(--md-sys-color-on-surface); }
.site-foot__tcw {
  width: 22px;
  height: auto;
}