/* Sokin landing. Values are from docs/design-tokens.md — the same palette,
   type and shape the app uses, so the page and the product look like one
   thing. Nothing here is invented. */

:root {
	--bg-app: #0f1320;
	--bg-night-top: #121b30;
	--surface-card: #171c2c;
	--border-default: #2a3145;
	--border-hairline: #1a2030;
	--text-primary: #e9e3d5;
	--text-secondary: #cfc9bb;
	--text-muted: #a9a396;
	--text-blue-grey: #8f9ab3;
	--text-faint: #5f6a82;
	--accent-amber: #e8b36a;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	min-height: 100vh;
	background: linear-gradient(180deg, var(--bg-night-top) 0%, var(--bg-app) 60%);
	background-attachment: fixed;
	color: var(--text-primary);
	font-family: "Alegreya Sans", ui-sans-serif, system-ui, -apple-system,
		"Segoe UI", Roboto, "Helvetica Neue", sans-serif;
	font-size: 18px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.page {
	max-width: 44rem;
	margin: 0 auto;
	padding: clamp(2.5rem, 8vh, 6rem) 1.5rem 3rem;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* --- brand ------------------------------------------------------------- */

.brand { display: flex; align-items: center; gap: 0.75rem; }

.brand svg { width: 44px; height: 44px; flex: none; }

/* The dot's slow pulse — 3.6s, from the tokens doc. Stilled for anyone who
   asked their system for less motion; this is a page about sleeping. */
.dot { animation: sokinDot 3.6s ease-in-out infinite; transform-origin: 48px 63px; }

@keyframes sokinDot {
	0%, 100% { opacity: 0.75; transform: scale(1); }
	50%      { opacity: 1;    transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
	.dot { animation: none; }
}

.wordmark {
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	margin: 0;
}

/* --- hero -------------------------------------------------------------- */

main { flex: 1; }

h1 {
	font-size: clamp(2rem, 6vw, 3rem);
	font-weight: 800;
	line-height: 1.15;
	margin: clamp(3rem, 12vh, 6rem) 0 1rem;
	max-width: 20ch;
}

.subline {
	font-size: clamp(1.1rem, 3vw, 1.35rem);
	color: var(--text-secondary);
	margin: 0 0 2.5rem;
	max-width: 34ch;
}

.availability {
	display: inline-block;
	padding: 0.55rem 1.1rem;
	border: 1px solid var(--border-default);
	border-radius: 999px;
	background: var(--surface-card);
	color: var(--text-blue-grey);
	font-size: 0.95rem;
}

.availability b { color: var(--accent-amber); font-weight: 600; }

/* --- prose (privacy, terms) -------------------------------------------- */

.prose { margin-top: 3rem; }
.prose h1 { margin-top: 0; font-size: clamp(1.7rem, 5vw, 2.2rem); }
.prose h2 { font-size: 1.25rem; font-weight: 700; margin: 2rem 0 0.5rem; }
.prose p { color: var(--text-secondary); max-width: 62ch; }

.draft {
	border: 1px solid var(--border-default);
	border-left: 3px solid var(--accent-amber);
	border-radius: 12px;
	background: var(--surface-card);
	padding: 1rem 1.25rem;
	color: var(--text-muted);
	font-size: 0.95rem;
}

/* --- footer ------------------------------------------------------------ */

footer {
	margin-top: 4rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--border-hairline);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	align-items: baseline;
	font-size: 0.95rem;
	color: var(--text-faint);
}

footer a { color: var(--text-muted); text-decoration: none; }
footer a:hover, footer a:focus-visible { color: var(--text-primary); text-decoration: underline; }
footer .spacer { flex: 1; }

a:focus-visible {
	outline: 2px solid var(--accent-amber);
	outline-offset: 3px;
	border-radius: 4px;
}

/* The wordmark links home on the sub-pages; it should still read as the
   wordmark, not as a link. */
.wordmark a { color: inherit; text-decoration: none; }