/* Aswati — shared design system (vocal imprint identity) */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Noto+Sans+Arabic:wght@500;700&family=DM+Mono:wght@400;500&family=Manrope:wght@300;400;500;700&display=swap');

:root {
  --ink: #0b0b0c;
  --ink-2: #131215;
  --bone: #f3efe7;
  --muted: #9a958b;
  --faint: rgba(243,239,231,0.10);
  --faint-2: rgba(243,239,231,0.06);
  --gold: #d4af37;
  --brass: #b98c3e;
  --green: #7bbf8a;
}

* { -webkit-font-smoothing: antialiased; }
body { font-family: 'Manrope', sans-serif; background-color: var(--ink); color: var(--bone); overflow-x: hidden; }
::selection { background: rgba(212,175,55,0.25); color: #fff; }

.serif  { font-family: 'Space Grotesk', 'Manrope', sans-serif; letter-spacing: -0.02em; }
.dm     { font-family: 'DM Mono', ui-monospace, monospace; }
.arabic { font-family: 'Noto Sans Arabic', sans-serif; }

.eyebrow { font-family: 'DM Mono', monospace; font-size: 0.68rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--brass); }
.display { font-family: 'Space Grotesk', 'Manrope', sans-serif; font-weight: 600; line-height: 0.98; letter-spacing: -0.03em; }

a, button { transition: color .25s ease, background-color .25s ease, border-color .25s ease, opacity .25s ease, transform .25s ease; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

.rule { border-top: 1px solid var(--faint); }

/* underline-on-hover link */
.ulink { position: relative; }
.ulink::after { content: ""; position: absolute; left: 0; bottom: -3px; height: 1px; width: 0; background: var(--gold); transition: width .3s ease; }
.ulink:hover::after { width: 100%; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; font-family: 'DM Mono', monospace; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; padding: 1.05rem 1.9rem; border-radius: 3px; }
.btn-solid { background: var(--gold); color: var(--ink); }
.btn-solid:hover { background: var(--bone); }
.btn-ghost { color: var(--bone); border: 1px solid var(--faint); }
.btn-ghost:hover { border-color: rgba(212,175,55,0.5); color: var(--gold); }

/* legal / long-form prose */
.prose h1 { font-family: 'Space Grotesk', sans-serif; font-weight: 600; color: var(--bone); font-size: clamp(2.25rem,5.5vw,3.25rem); line-height: 1.02; letter-spacing: -0.03em; }
.prose h2 { font-family: 'Space Grotesk', sans-serif; color: var(--bone); font-weight: 600; font-size: 1.6rem; margin-top: 2.6rem; margin-bottom: 0.5rem; line-height: 1.15; letter-spacing: -0.02em; }
.prose h3 { color: var(--bone); font-weight: 500; font-size: 1.02rem; margin-top: 1.5rem; margin-bottom: 0.35rem; }
.prose p, .prose li { font-size: 0.97rem; line-height: 1.75; color: var(--muted); font-weight: 300; }
.prose ul { list-style: disc; padding-left: 1.25rem; margin: 0.5rem 0 1rem; }
.prose a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--bone); font-weight: 500; }
.prose table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.85rem; }
.prose th, .prose td { border: 1px solid var(--faint); padding: 0.6rem 0.75rem; text-align: left; vertical-align: top; }
.prose th { font-family: 'DM Mono', monospace; color: var(--brass); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.66rem; font-weight: 400; }
.prose .check li { list-style: none; position: relative; padding-left: 1.6rem; }
.prose .check li::before { content: "✓"; position: absolute; left: 0; color: var(--green); }
.prose .cross li { list-style: none; position: relative; padding-left: 1.6rem; }
.prose .cross li::before { content: "✕"; position: absolute; left: 0; color: #d4756b; }

/* form fields */
.field { background: #0a0a0a; border: 1px solid var(--faint); color: var(--bone); transition: all .25s ease; }
.field:focus { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(212,175,55,0.15); outline: none; }
.field::placeholder { color: #6e6a63; }

/* Free vocals page — lower friction: lift the form above the preview on small
   screens, and tighten the hero so the form starts higher up the page */
.vocals-hero { margin-bottom: 2.5rem; }
@media (min-width: 768px) { .vocals-hero { margin-bottom: 3.25rem; } }
@media (max-width: 1023px) { .vocals-form { order: -1; } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}