@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Manrope:wght@400;500;600&family=Fraunces:ital,wght@0,500;0,600;1,500&family=Plus+Jakarta+Sans:wght@400;500;600&family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
  --bg: #0b0b0c;
  --panel: #141415;
  --panel-border: #232325;
  --text: #f3f2ef;
  --muted: #9a9a9d;
  --faint: #6c6c6f;
  --accent: #ef795f;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}

.wrap{
  max-width:1240px;
  margin:0 auto;
  padding:0 32px;
}

/* ---------- header ---------- */
header.top{
  padding:88px 0 48px;
  border-bottom:1px solid var(--panel-border);
}

.eyebrow{
  font-family:'Space Grotesk', sans-serif;
  font-size:0.78rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--faint);
  margin-bottom:22px;
}

h1.headline{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:clamp(2.6rem, 6vw, 4.4rem);
  line-height:1.02;
  letter-spacing:-0.02em;
}

h1.headline span{ display:block; color:var(--muted); }

p.sub{
  margin-top:26px;
  max-width:640px;
  font-size:1.05rem;
  color:var(--muted);
  line-height:1.6;
}

/* ---------- grid ---------- */
main{ padding:56px 0 100px; }

.grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:28px;
}

@media (max-width:860px){
  .grid{ grid-template-columns:1fr; }
}

.card{
  background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius:14px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.card.is-pending{ opacity:0.55; }

.card-preview{
  position:relative;
  padding:46px 32px 36px;
  min-height:190px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
}

.card-preview .wordmark{
  font-size:clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight:700;
  line-height:1.12;
  text-transform:uppercase;
  letter-spacing:-0.01em;
  position:relative;
  z-index:1;
}

.card-body{
  padding:26px 32px 32px;
}

.variant-label{
  font-family:'Space Grotesk', sans-serif;
  font-size:0.72rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--faint);
  margin-bottom:10px;
}

.card-title{
  font-family:'Space Grotesk', sans-serif;
  font-size:1.3rem;
  font-weight:600;
  margin-bottom:10px;
}

.card-desc{
  color:var(--muted);
  font-size:0.95rem;
  line-height:1.6;
  margin-bottom:20px;
}

.swatches{
  display:flex;
  gap:8px;
  margin-bottom:18px;
}

.swatch{
  width:22px;
  height:22px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.15);
}

.fonts-line{
  font-size:0.82rem;
  color:var(--faint);
  margin-bottom:24px;
}

.fonts-line b{ color:var(--muted); font-weight:600; }

.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 18px;
  border:1px solid var(--panel-border);
  border-radius:8px;
  color:var(--text);
  text-decoration:none;
  font-size:0.82rem;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  transition:border-color .15s ease, background .15s ease;
}

.btn:hover{
  border-color:var(--accent);
  background:rgba(239,121,95,0.08);
}

.btn.disabled{
  pointer-events:none;
  opacity:0.5;
}

footer.site-footer{
  border-top:1px solid var(--panel-border);
  padding:32px 0 60px;
  color:var(--faint);
  font-size:0.85rem;
}