/* Sonic North Studio – Under Construction page (sonicnorthstudio.com until launch).
   Same tokens as src/styles/global.css and the Design System. Plain CSS, no build step. */
@font-face { font-family: 'Jost'; src: url('fonts/jost-light.woff') format('woff'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('fonts/jost-regular.woff') format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('fonts/jost-medium.woff') format('woff'); font-weight: 500; font-display: swap; }

:root {
	--ink: #0B0F14; --night: #10151B; --paper: #F7F6F3; --mist: #EDEAE3; --muted: #6E7177;
	--gold: #D1AB27; --line: rgb(11 15 20 / .12); --line-dark: rgb(237 234 227 / .15);
	--gutter: 56px;
}
@media (max-width: 768px) { :root { --gutter: 20px; } }

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }
body { margin: 0; font-family: 'Jost', ui-sans-serif, system-ui, sans-serif; font-weight: 400; line-height: 1.6; }
a { color: inherit; }
::selection { background: var(--gold); color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.eyebrow { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; }
.wrap { width: 100%; max-width: calc(1328px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.logo { display: block; height: 64px; width: auto; color: rgb(237 234 227 / .9); }
@media (max-width: 640px) { .logo { height: 48px; } }

/* ── home: full-screen night hero ── */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; background: var(--night); color: var(--mist); overflow: hidden; }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* dark-blue tint over the photo – same values as .photo-tint[data-tone="night"] on the site */
.hero-tint { position: absolute; inset: 0; background: radial-gradient(110% 90% at 60% 30%, rgb(14 28 52 / .84) 0%, rgb(6 13 28 / .9) 55%, rgb(2 5 12 / .96) 100%); }
.hero > *:not(.hero-photo):not(.hero-tint) { position: relative; }

.top { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 84px; margin-top: 36px; }
.top a { text-decoration: none; }
.top-link { font-size: 14px; letter-spacing: .06em; opacity: .9; transition: opacity .2s; }
.top-link:hover { opacity: 1; }
.top-social { display: flex; gap: 8px; margin-right: -8px; }
.icon-link { display: grid; place-items: center; width: 36px; height: 36px; opacity: .9; transition: opacity .2s; }
.icon-link:hover { opacity: 1; }

.main { flex: 1; display: flex; align-items: center; padding-block: 56px; }
.main-inner { max-width: 620px; }
.eyebrow-gold { color: var(--gold); }
h1 { margin: 20px 0 0; font-weight: 300; font-size: clamp(44px, 6vw, 88px); line-height: 1; letter-spacing: -.01em; }
.lead { margin: 24px 0 0; max-width: 480px; font-size: 18px; line-height: 1.625; opacity: .8; }

.signup { margin-top: 36px; display: flex; max-width: 460px; }
.signup input { flex: 1; min-width: 0; border: 1px solid var(--line-dark); border-right: 0; background: rgb(11 15 20 / .25); color: var(--mist); padding: 13px 14px; font: inherit; font-size: 15px; border-radius: 0; }
.signup input::placeholder { color: rgb(237 234 227 / .55); }
.signup button { border: 0; background: var(--gold); color: var(--ink); padding: 13px 22px; font: inherit; font-size: 15px; cursor: pointer; white-space: nowrap; transition: opacity .2s; border-radius: 0; }
.signup button:hover { opacity: .88; }
.signup button[disabled] { opacity: .6; cursor: default; }
.hp { position: absolute; left: -9999px; }
.note { margin: 12px 0 0; font-size: 12px; opacity: .55; max-width: 460px; }
.note a { text-underline-offset: 3px; }
.msg { margin: 14px 0 0; font-size: 14px; }
.msg:empty { margin: 0; }
.msg.ok { color: var(--gold); }
@media (max-width: 480px) {
	.signup { flex-direction: column; gap: 10px; }
	.signup input { border-right: 1px solid var(--line-dark); }
}

.coords { margin-top: 56px; opacity: .5; }

.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; position: relative; padding-block: 22px; font-size: 12px; letter-spacing: .04em; }
/* hairline aligned with the content, not the gutter */
.foot::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--line-dark); }
.foot span, .foot a { opacity: .5; text-decoration: none; transition: opacity .2s; }
.foot a:hover { opacity: 1; }
.foot nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }

/* ── legal pages: paper ── */
.legal { background: var(--paper); color: var(--ink); min-height: 100vh; display: flex; flex-direction: column; }
.legal-top { background: var(--ink); color: var(--mist); padding-bottom: 20px; }
.legal main { flex: 1; max-width: 760px; padding-top: 56px; padding-bottom: 96px; }
.legal h1 { font-size: clamp(36px, 4.4vw, 58px); line-height: 1.05; margin: 0; }
.legal h2 { font-weight: 400; font-size: 20px; margin: 40px 0 0; }
.legal p, .legal li { line-height: 1.7; }
.legal .muted { color: var(--muted); }
.legal .ph { background: rgb(209 171 39 / .18); padding: 0 4px; }
.legal-foot { background: var(--ink); color: var(--mist); }