/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V4
 * macrostructure: Manifesto · genre: modern-minimal · theme: custom VUN blue
 * nav: N9 edge-aligned · footer: Ft2 inline · enrichment: supplied brand mark
 * audience: VUN.CAT community · use: coming-soon announcement · tone: curious, confident
 * knobs: display=xxl, alignment=left, art=brand-stamp · motion: link-lift
 */
@import url("./tokens.css");

@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("./fonts/space-grotesk-latin.woff2") format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
html { color-scheme: light; background: var(--color-paper); }
body { color: var(--color-ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
::selection { background: var(--color-ink); color: var(--color-paper); }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 6px; }
p, h1 { margin: 0; }
svg { display: block; flex-shrink: 0; }

.page { width: min(100%, 1600px); min-height: 100svh; margin-inline: auto; padding: 0 clamp(24px, 5.6vw, 88px); display: flex; flex-direction: column; }
.header { padding-block: var(--space-8); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.brand { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; border-radius: var(--radius-button); white-space: nowrap; }
.brand img { display: block; width: 44px; height: 44px; }
.brand span { font-size: 26px; font-weight: 700; letter-spacing: -.06em; }
.launch-status { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-small); white-space: nowrap; }
.status-dot { width: 7px; height: 7px; border-radius: var(--radius-round); background: var(--color-ink); }

.hero { flex: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: var(--space-12); padding-block: clamp(40px, 6vh, 72px) var(--space-20); }
.hero-copy { min-width: 0; position: relative; z-index: 1; }
h1 { font-family: var(--font-display); font-size: var(--text-display); font-weight: 700; font-style: normal; letter-spacing: -.075em; line-height: .98; overflow-wrap: anywhere; min-width: 0; }
.period { margin-left: -.03em; }
.intro { font-size: var(--text-body); line-height: 1.6; margin-top: var(--space-8); }
.community-links { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.community-link { display: inline-flex; justify-content: center; align-items: center; gap: var(--space-3); min-height: 56px; padding: var(--space-4) var(--space-5); color: var(--color-accent-ink); background: var(--color-accent); border: var(--rule-thin) solid var(--color-accent); border-radius: var(--radius-button); font-size: 15px; font-weight: 700; white-space: nowrap; transition: transform var(--dur-fast) var(--ease-out); }
.platform-icon { width: 21px; height: 21px; }
.link-arrow { width: 17px; height: 17px; margin-left: var(--space-2); }
.community-link:active { transform: translateY(1px); }

.hero-art { position: relative; min-width: 0; padding: var(--space-12) var(--space-4); display: flex; flex-direction: column; align-items: center; }
.cat-stamp { width: min(100%, 390px); aspect-ratio: 1; display: flex; flex-direction: column; justify-content: space-between; border: var(--rule-art) solid var(--color-art-rule); border-radius: var(--radius-stamp); transform: rotate(-8deg); padding: var(--space-6); }
.stamp-top, .stamp-bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); font-family: var(--font-label); font-size: var(--text-label); font-weight: 700; letter-spacing: .05em; }
.stamp-bottom > :last-child { font-size: 24px; line-height: .7; }
.cat-mark { display: block; width: 100%; height: auto; min-height: 0; flex: 1; object-fit: contain; }

.footer { display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); padding-block: var(--space-6); border-top: var(--rule-thin) solid var(--color-rule); font-size: var(--text-label); line-height: 1.5; }
.footer-signoff { display: flex; align-items: center; gap: var(--space-3); white-space: nowrap; }
.footer-signoff svg { width: 20px; height: 20px; }

@media (hover: hover) {
  .community-link:hover { transform: translateY(-3px); }
}
@media (min-width: 1600px) {
  .page { min-height: min(100svh, 1200px); }
}
@media (max-width: 1050px) {
  .hero { gap: var(--space-6); grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
  .cat-stamp { padding: var(--space-4); }
  .stamp-top, .stamp-bottom { font-size: 9px; }
}
@media (max-width: 780px) {
  .page { padding-inline: var(--space-6); }
  .header { padding-block: var(--space-6); }
  .hero { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); padding-block: var(--space-12); }
  h1 { font-size: clamp(66px, 12.9vw, 100px); }
  .hero-art { padding-block: var(--space-8); max-width: 390px; width: 74%; justify-self: center; }
  .cat-stamp { max-width: 320px; padding: var(--space-5); }
  .stamp-top, .stamp-bottom { font-size: 10px; }
  .footer { font-size: 11px; }
}
@media (max-width: 450px) {
  .brand span { font-size: 24px; }
  .brand img { width: 36px; height: 36px; }
  .launch-status { font-size: var(--text-label); }
  h1 { font-size: clamp(54px, 13.8vw, 76px); }
  .intro { font-size: 15px; margin-top: var(--space-6); }
  .community-links { flex-direction: column; margin-top: var(--space-6); }
  .community-link { width: 100%; justify-content: flex-start; padding-inline: var(--space-5); }
  .link-arrow { margin-left: auto; }
  .hero-art { width: 80%; margin-top: var(--space-3); }
  .cat-stamp { padding: var(--space-4); }
  .stamp-top, .stamp-bottom { font-size: 8px; }
  .footer { align-items: flex-start; gap: var(--space-4); }
  .footer-signoff { gap: var(--space-1); }
  .footer-signoff svg { width: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .community-link { transition: none; }
  .community-link:hover, .community-link:active { transform: none; }
}