/* Chantier Label Company · "Em breve"
   Postura Matéria-prima: noite, algodão cru e musgo. Um terreno intocado em pontilhado se move ao fundo. */
:root {
  --night: #0E0F0C;
  --cotton: #E8E1D2;
  --moss: #8C9A3E;
  --dust: #A89F8A;
  --moss-dark: #5C6628;
  --font-display: "Syne", "Arial Black", Arial, sans-serif;
  --font-body: "Archivo", "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "DM Mono", ui-monospace, Menlo, Consolas, monospace;
  --gut: max(16px, env(safe-area-inset-left, 0px));
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--night); color: var(--cotton); font: 400 1rem/1.55 var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--moss); outline-offset: 4px; }

.terrain { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
.veil { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 30% 45%, rgba(14,15,12,.82), rgba(14,15,12,.35) 60%, rgba(14,15,12,0) 100%); }

.top, .soon, .bottom { position: relative; z-index: 2; padding-left: var(--gut); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: max(20px, env(safe-area-inset-top, 0px)); padding-bottom: 20px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand .mark { width: 34px; height: 34px; }
.brand span { font: 800 1.05rem/1 var(--font-display); letter-spacing: .06em; display: grid; gap: 4px; }
.brand small { font: 500 .62rem/1 var(--font-mono); letter-spacing: .3em; color: var(--moss); }
.ig { font: 500 .8rem var(--font-mono); letter-spacing: .06em; text-decoration: none; border-bottom: 1px solid rgba(232,225,210,.35); padding-bottom: 3px; }
.ig:hover { border-color: var(--moss); color: #fff; }

.soon { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding-block: 24px 40px; max-width: 1400px; }
.kicker { margin: 0; font: 500 .8rem var(--font-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--moss); display: flex; align-items: center; gap: 14px; }
.kicker::before { content: ""; width: 34px; height: 2px; background: var(--moss); }
.soon h1 { margin: 0; font: 800 clamp(5.2rem, 24vw, 21rem)/.8 var(--font-display); letter-spacing: -.045em; text-transform: uppercase; color: var(--cotton); text-shadow: 0 0 60px rgba(14,15,12,.6); }
.line { margin: 6px 0 0; max-width: 44ch; color: var(--dust); font-size: 1.08rem; }
.cta { align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; margin-top: 8px; padding: 15px 22px; background: var(--moss); color: var(--night); font: 600 .95rem var(--font-body); text-decoration: none; transition: background .2s, transform .2s; }
.cta i { font-style: normal; transition: transform .2s; }
.cta:hover { background: var(--cotton); }
.cta:hover i { transform: translateX(4px); }

.bottom { background: linear-gradient(rgba(14,15,12,.6), rgba(14,15,12,.92)); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 18px; padding-bottom: max(22px, env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(232,225,210,.12); font: 400 .75rem var(--font-mono); letter-spacing: .08em; color: var(--dust); }
.bottom p { margin: 0; }
.bottom nav { display: flex; gap: 18px; }
.bottom a { text-decoration: none; }
.bottom a:hover { color: var(--cotton); }

@media (max-width: 560px) {
  .ig { display: none; }
  .veil { background: linear-gradient(rgba(14,15,12,.25), rgba(14,15,12,.8) 55%, rgba(14,15,12,.5)); }
}
@media (prefers-reduced-motion: reduce) { .cta, .cta i { transition: none; } }