/* Namawake Records - 2026 redesign. Quiet minimal label, organic meets electronic. */

/* ---------- Fonts (self-hosted) ---------- */
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/space-grotesk-400.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/space-grotesk-500.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/space-grotesk-700.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/inter-400.woff2') format('woff2'); }

/* ---------- Tokens ---------- */
:root {
  --paper:#fcfbf9; --ink:#1c1a17; --muted:#7a7268; --line:#ece4d8;
  --terra:#ce7b43; --terra-dark:#a85c2b; --sand:#f4eee6;
  --maxw:880px; --radius:14px;
  --display:'Space Grotesk', system-ui, sans-serif;
  --body:'Inter', system-ui, -apple-system, sans-serif;
}

/* ---------- Base ---------- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font-family:var(--body); color:var(--ink); background:var(--paper); line-height:1.75; font-size:17px; -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(120% 60% at 50% -10%, rgba(206,123,67,.07), transparent 60%); }
img { max-width:100%; height:auto; display:block; }
a { color:var(--terra-dark); text-underline-offset:2px; }
a:hover { color:var(--ink); }
h1,h2,h3 { font-family:var(--display); margin:0 0 .5em; line-height:1.2; }
p { margin:0 0 1rem; }
:focus-visible { outline:2px solid var(--terra); outline-offset:3px; border-radius:3px; }

.wrap { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.section { padding:60px 0; }
.center { text-align:center; }
.muted { color:var(--muted); }

/* ---------- Header ---------- */
.site-header { border-bottom:1px solid var(--line); }
.site-header .wrap { display:flex; align-items:center; justify-content:center; min-height:72px; }
.brand { font-family:var(--display); font-weight:500; font-size:1rem; letter-spacing:.46em; text-transform:uppercase; text-decoration:none; color:var(--ink); padding-left:.46em; }

/* ---------- Hero ---------- */
.hero { padding:66px 0 36px; text-align:center; }
.hero .cover { width:288px; max-width:78vw; aspect-ratio:1/1; margin:0 auto 36px; border-radius:var(--radius); box-shadow:0 22px 60px rgba(60,40,24,.16); border:1px solid var(--line); }
.hero h1 { font-weight:400; font-size:clamp(2.1rem,6vw,3.3rem); letter-spacing:.14em; text-transform:uppercase; }
.hero h1 b { font-weight:700; color:var(--terra-dark); }
.tagline { font-family:var(--display); font-weight:400; color:var(--muted); font-size:clamp(1rem,2.4vw,1.18rem); letter-spacing:.02em; max-width:46ch; margin:.3em auto 0; }

/* single-line wave motif (echoes the cover line art) */
.motif { display:block; width:160px; height:24px; margin:28px auto; color:var(--terra); opacity:.8; }

/* ---------- Release card ---------- */
.release { background:var(--sand); border:1px solid var(--line); border-radius:var(--radius); padding:34px 28px; max-width:680px; margin:0 auto; text-align:center; }
.release .eyebrow { font-family:var(--display); font-weight:500; letter-spacing:.22em; text-transform:uppercase; font-size:.72rem; color:var(--terra-dark); }
.release h2 { font-weight:700; font-size:1.7rem; margin:.4em 0 .05em; letter-spacing:.01em; }
.release .by { color:var(--muted); margin-bottom:22px; }
.btn { display:inline-block; font-family:var(--display); font-weight:500; font-size:.98rem; letter-spacing:.02em; text-decoration:none; padding:13px 26px; border-radius:999px; background:var(--terra); color:#fff; transition:background .2s, transform .2s; }
.btn:hover { background:var(--terra-dark); color:#fff; transform:translateY(-1px); }
.release .preview { margin-top:18px; }
.release .preview summary { cursor:pointer; list-style:none; font-family:var(--body); font-size:.9rem; color:var(--muted); }
.release .preview summary::-webkit-details-marker { display:none; }
.release .preview summary:hover { color:var(--ink); }

/* ---------- Embed (click to load) ---------- */
.embed { position:relative; border-radius:12px; overflow:hidden; background:#fff; border:1px solid var(--line); min-height:152px; margin-top:14px; }
.embed button.embed__btn { width:100%; min-height:152px; display:flex; align-items:center; justify-content:center; gap:14px; background:linear-gradient(160deg,#fff,var(--sand)); color:var(--ink); border:0; cursor:pointer; font-family:var(--display); font-weight:500; font-size:.95rem; padding:22px; }
.embed button.embed__btn:hover { background:linear-gradient(160deg,#fff,#efdcc8); }
.embed .play { width:46px; height:46px; border-radius:50%; background:var(--terra); display:grid; place-items:center; flex:none; }
.embed .play svg { width:20px; height:20px; fill:#fff; margin-left:3px; }
.embed .embed__btn small { display:block; color:var(--muted); font-family:var(--body); font-weight:400; margin-top:2px; }
.embed iframe { width:100%; border:0; display:block; }

/* ---------- About ---------- */
.about { max-width:600px; margin:0 auto; text-align:center; }
.about p { color:var(--muted); }
.about .em { color:var(--ink); }

/* ---------- Legal ---------- */
.legal { max-width:680px; margin-inline:auto; }
.legal h1 { font-weight:400; letter-spacing:.05em; }
.legal h2 { font-size:1.12rem; font-weight:500; margin-top:1.7em; }
.legal address { font-style:normal; line-height:1.85; }
.legal .draft { background:#fff7e6; border:1px solid #f0d488; border-radius:10px; padding:14px 18px; color:#7a5a14; font-size:.95rem; margin-bottom:24px; }
.back { display:inline-block; margin-top:26px; font-family:var(--display); font-weight:500; }

/* ---------- Footer ---------- */
.site-footer { border-top:1px solid var(--line); padding:32px 0; margin-top:34px; }
.site-footer .wrap { display:flex; flex-wrap:wrap; gap:10px 20px; align-items:center; justify-content:center; text-align:center; }
.site-footer nav { display:flex; gap:18px; }
.site-footer a { font-family:var(--display); font-weight:500; font-size:.8rem; letter-spacing:.05em; text-decoration:none; color:var(--muted); }
.site-footer a:hover { color:var(--ink); }
.site-footer .copy { width:100%; color:var(--muted); font-size:.78rem; letter-spacing:.04em; }

@media (prefers-reduced-motion:reduce){ .btn:hover{ transform:none; } }