/* Inta Studio — static stylesheet
   Merged from the former SvelteKit app.css (reset + monospace base),
   +layout.svelte (body/page), and +page.svelte / +error.svelte scoped styles.

   Colours come from /design-tokens.css (paper + terminal themes). This file
   holds layout/type only — it must not contain a literal colour. */

/* ---- Reset + monospace base (was app.css) ---- */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: var(--font-mono);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	color: var(--fg);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	overflow-x: hidden;
}

a {
	color: inherit;
	text-decoration: none;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* ---- Body + page wrapper (was +layout.svelte) ---- */
body {
	margin: 0;
	padding: 0;
	max-width: 100vw;
	overflow-x: hidden;
	overflow-x: clip;
	background: var(--bg);
}

.page {
	max-width: 100vw;
	overflow-x: hidden;
	overflow-x: clip;
	min-height: 100vh;
	display: block;
}

/* ---- Home page (was +page.svelte) ---- */
/* Minimal monospace document — everything inherits 13px mono from body */
.wrap {
	max-width: 640px;
	width: 100%;
	margin: 0 auto;
	padding: clamp(2rem, 8vh, 4rem) clamp(0.75rem, 5vw, 2rem) 4rem;
	box-sizing: border-box;
}

.masthead {
	margin: 0;
}

.wordmark {
	font-size: 1em;
	font-weight: 700;
	margin: 0;
	color: var(--fg);
	overflow-wrap: anywhere;
}

/* blank-line gap below the wordmark/tagline block */
.intro {
	margin: 0 0 1.5em;
}

.intro p {
	margin: 0;
	color: var(--fg);
	overflow-wrap: anywhere;
}

/* blank-line gap below the projects block */
.projects {
	margin: 0 0 1.5em;
}

.project-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.project {
	display: grid;
	grid-template-columns: minmax(min(7rem, 40%), max-content) 1fr;
	align-items: baseline;
	column-gap: 1.5em;
	row-gap: 0;
	min-width: 0;
	padding: 0;
}

.project-name {
	font-size: 1em;
	font-weight: 400;
	color: var(--fg);
	text-decoration: none;
	min-width: 0;
	overflow-wrap: anywhere;
	/* Shrink to text width so trailing column space isn't clickable */
	justify-self: start;
}

/* Project name links: bold + underlined per spec */
a.project-name {
	font-weight: 700;
	color: var(--link);
	text-decoration: underline;
	text-underline-offset: var(--underline-offset);
}

a.project-name:hover {
	color: var(--link-hover);
}

.project-desc {
	color: var(--fg);
	min-width: 0;
	overflow-wrap: anywhere;
}

@media (max-width: 28rem) {
	.project {
		grid-template-columns: 1fr;
		row-gap: 0;
	}
}

.contact {
	margin: 0;
}

.contact p {
	margin: 0;
	color: var(--fg);
	overflow-wrap: anywhere;
}

.contact a {
	color: var(--link);
	text-decoration: underline;
	text-underline-offset: var(--underline-offset);
}

.contact a:hover {
	color: var(--link-hover);
}

.footer {
	margin: 0;
}

.footer p {
	margin: 0;
	color: var(--fg);
}

/* ---- Error / 404 page (was +error.svelte) ---- */
.error-page {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(0.75rem, 5vw, 2rem);
	background: var(--bg);
}

.error-container {
	max-width: 480px;
	width: 100%;
	box-sizing: border-box;
}

.error-code {
	display: block;
	font-size: 1em;
	font-weight: 700;
	color: var(--fg);
	margin: 0;
}

.error-title {
	font-size: 1em;
	font-weight: 700;
	color: var(--fg);
	margin: 0;
	overflow-wrap: anywhere;
}

.error-message {
	color: var(--fg);
	margin: 0 0 1.5em;
	overflow-wrap: anywhere;
}

.error-link {
	display: inline-block;
	font-size: 1em;
	font-weight: 700;
	color: var(--link);
	text-decoration: underline;
	text-underline-offset: var(--underline-offset);
}

.error-link:hover {
	color: var(--link-hover);
}

/* ---- Theme toggle -------------------------------------------------------
   Injected by /theme.js, so it never appears as a dead control without JS.
   Reads as a terminal prompt: [ auto ] -> [ light ] -> [ dark ] -> [ auto ].
   -------------------------------------------------------------------------- */
.theme-toggle {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 10;

	/* 44px minimum touch target; the glyphs stay at body size */
	min-height: 44px;
	min-width: 44px;
	max-width: calc(100vw - 1rem);
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	padding: 0 var(--page-pad-x);

	font-family: inherit;
	font-size: 1em;
	line-height: var(--line-height-base);
	font-weight: var(--font-weight-normal);
	color: var(--fg-muted);
	background: transparent;
	border: 0;
	cursor: pointer;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
}

.theme-toggle:hover {
	color: var(--fg);
}

.theme-toggle:focus-visible {
	outline: 1px solid var(--focus);
	outline-offset: -4px;
}

/* ---- Terminal caret -----------------------------------------------------
   One restrained nod to the CRT: a block cursor after the wordmark, visible
   only in the terminal (dark) theme via --caret-opacity.
   -------------------------------------------------------------------------- */
.wordmark::after {
	/* `/ ""` gives the glyph empty alt text so screen readers skip it.
	   --caret-glyph is "" on paper, so the light theme is untouched. */
	content: var(--caret-glyph) / '';
	margin-left: var(--caret-gap);
	color: var(--accent);
	animation: caret-blink 1.2s steps(1, end) infinite;
}

@keyframes caret-blink {
	0%,
	50% {
		opacity: 1;
	}
	50.01%,
	100% {
		opacity: 0;
	}
}

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