@import url("https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;1,400&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,300;1,9..144,400;1,9..144,500&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300&display=swap");

/* ─────────────────────────────────────────
   TOKENS
───────────────────────────────────────── */
:root {
	--bg:            #0a0a0a;
	--surface:       #121212;
	--surface-2:     #1a1a1a;
	--border:        rgba(180, 175, 170, 0.1);
	--border-mid:    rgba(180, 175, 170, 0.2);
	--text:          #e5e0d8;
	--text-secondary:#9a9588;
	--text-faint:    #4a4540;
	--accent:        #E85A2A;
	--accent-glow:   rgba(232, 90, 42, 0.12);
	--accent-faint:  rgba(232, 90, 42, 0.05);
	--font-display:  'Fraunces', Georgia, serif;
	--font-body:     'Crimson Text', Georgia, serif;
	--font-mono:     'DM Mono', 'Courier New', monospace;
}

/* ─────────────────────────────────────────
   RESET & BASE
───────────────────────────────────────── */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html { height: 100%; }

body {
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 300;
	line-height: 1.6;
	min-height: 100vh;
	background: var(--bg);
	color: var(--text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

/* Atmosphere: grain + vignette */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	background:
		radial-gradient(ellipse 90% 55% at 50% 25%, rgba(232, 90, 42, 0.028) 0%, transparent 65%),
		radial-gradient(ellipse 120% 120% at 50% 50%, transparent 55%, rgba(0,0,0,0.55) 100%);
	pointer-events: none;
	z-index: 0;
}

body::after {
	content: '';
	position: fixed;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	opacity: 0.022;
	pointer-events: none;
	z-index: 0;
}

/* ─────────────────────────────────────────
   HEADER
───────────────────────────────────────── */
.site-header {
	position: relative;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 36px;
	border-bottom: 1px solid var(--border);
}

.logo {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 400;
	font-style: italic;
	color: var(--text);
	letter-spacing: 0.02em;
	line-height: 1;
	user-select: none;
}

.logo em {
	color: var(--accent);
	font-style: italic;
}

.header-right {
	display: flex;
	align-items: center;
	gap: 20px;
}

.btn-nav {
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 300;
	letter-spacing: 0.06em;
	cursor: pointer;
	transition: color 0.15s;
	border: none;
	background: transparent;
	border-radius: 0;
}

.btn-nav-ghost {
	color: var(--text-secondary);
	padding: 0;
}

.btn-nav-ghost:hover {
	color: var(--text);
	background: transparent;
	transform: none;
}

.btn-nav-primary {
	color: var(--accent);
	padding: 6px 14px;
	border: 1px solid rgba(232, 90, 42, 0.35);
	background: var(--accent-faint);
}

.btn-nav-primary:hover {
	background: var(--accent-glow);
	border-color: rgba(232, 90, 42, 0.55);
	color: var(--accent);
	transform: none;
}

/* ─────────────────────────────────────────
   MAIN LAYOUT
───────────────────────────────────────── */
main {
	position: relative;
	z-index: 1;
	max-width: 800px;
	margin: 0 auto;
	padding: 48px 48px 96px;
	min-height: calc(100vh - 60px);
	display: flex;
	flex-direction: column;
}

/* ─────────────────────────────────────────
   SEARCH CONTAINER (centered initially)
───────────────────────────────────────── */
.search-container {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding-top: 30vh;
	transition: padding-top 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.search-container.searching {
	padding-top: 0;
}

/* ─────────────────────────────────────────
   SEARCH FORM
───────────────────────────────────────── */
.search-row {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: flex-end;
	gap: 0;
	border-bottom: 1px solid var(--border-mid);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	padding: 0;
	transition: border-color 0.25s ease;
	animation: slideDown 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.search-row:focus-within {
	border-bottom-color: var(--accent);
}

input[type="search"],
#search-input {
	flex: 1;
	padding: 0 0 14px;
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 300;
	font-style: italic;
	line-height: 1.3;
	background: transparent;
	border: none;
	color: var(--text);
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	caret-color: var(--accent);
	resize: none;
	overflow-y: auto;
	max-height: 200px;
	field-sizing: content;
}

input[type="search"]::placeholder,
#search-input::placeholder {
	color: var(--text-faint);
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

#search-input::-webkit-scrollbar {
	width: 4px;
}

#search-input::-webkit-scrollbar-thumb {
	background: var(--border-mid);
}

.search-row > button[type="submit"] {
	padding: 0 0 14px 24px;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-secondary);
	background: transparent;
	border: none;
	border-radius: 0;
	cursor: pointer;
	transition: color 0.15s;
	white-space: nowrap;
}

.search-row > button[type="submit"]:hover {
	color: var(--accent);
	background: transparent;
	transform: none;
}

.search-row > button[type="submit"]:disabled {
	opacity: 0.3;
	cursor: not-allowed;
	color: var(--text-faint);
	transform: none;
}

/* ─────────────────────────────────────────
   OUTPUT
───────────────────────────────────────── */
.output {
	position: relative;
	margin-top: 52px;
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	min-height: 0;
	max-height: none;
	overflow-y: visible;
	font-family: var(--font-body);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.65;
	color: var(--text-secondary);
	box-shadow: none;
	animation: none;
}

.output-content {
	width: 100%;
}

/* Streaming cursor */
.output.streaming::after {
	content: '▋';
	display: inline;
	font-size: 0.8em;
	line-height: 1;
	color: var(--accent);
	margin-left: 2px;
	animation: blink 0.9s step-end infinite;
}

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

/* Output: typographic hierarchy */
.output :where(h1, h2, h3) {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 400;
	color: var(--text);
	line-height: 1.2;
	margin: 0 0 16px;
}

.output h1 {
	font-size: 36px;
	font-weight: 400;
	margin-bottom: 28px;
	letter-spacing: -0.01em;
}
.output h2 { font-size: 22px; margin-top: 40px; }
.output h3 { font-size: 17px; margin-top: 28px; }

.output h2:first-child,
.output h3:first-child { margin-top: 0; }

.output p {
	margin: 0 0 22px;
	color: var(--text-secondary);
	line-height: 1.7;
	font-size: 20px;
}

.output ul, .output ol {
	margin: 0 0 18px;
	padding-left: 1.4em;
	color: var(--text-secondary);
}

.output li { margin-bottom: 5px; }

.output strong {
	font-weight: 500;
	color: var(--text);
}

.output em {
	font-family: var(--font-display);
	font-style: italic;
	color: var(--text);
}

.output a {
	color: var(--accent);
	text-decoration: none;
	border-bottom: 1px solid rgba(232, 90, 42, 0.28);
	transition: border-color 0.15s;
}

.output a:hover {
	border-bottom-color: var(--accent);
}

.output blockquote {
	margin: 0 0 18px;
	padding: 14px 20px;
	border-left: 2px solid var(--accent);
	background: var(--accent-faint);
	color: var(--text-secondary);
	font-style: italic;
}

.output pre {
	margin: 0 0 18px;
	padding: 16px 18px;
	background: var(--surface);
	border: 1px solid var(--border);
	overflow-x: auto;
}

.output code {
	font-family: var(--font-mono);
	font-size: 11.5px;
	background: var(--surface-2);
	padding: 1px 5px;
	color: var(--text);
}

.output pre code {
	background: transparent;
	padding: 0;
	font-size: 12px;
}

.output table {
	width: 100%;
	border-collapse: collapse;
	margin: 40px 0;
	font-size: 20px;
}

.output thead {
	background: transparent;
}

.output th {
	text-align: left;
	padding: 10px 18px 10px 0;
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-secondary);
	border-bottom: 1px solid var(--border-mid);
	font-family: var(--font-mono);
}

.output td {
	padding: 12px 18px 12px 0;
	border-bottom: 1px solid var(--border);
	color: var(--text-secondary);
}

.output tbody tr:last-child td {
	border-bottom: none;
}

.output tbody tr:hover td {
	color: var(--text);
}

.output td strong {
	color: var(--text);
	font-weight: 600;
}

/* Copy button */
.copy-btn {
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 8px;
	background: transparent;
	border: 1px solid var(--border);
	color: var(--text-faint);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.5s ease, transform 0.5s ease, color 0.15s, border-color 0.15s, visibility 0.5s;
}

.output.has-content:not(.streaming) .copy-btn {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.copy-btn:hover {
	color: var(--text);
	border-color: var(--border-mid);
}

.copy-btn.copied {
	color: var(--accent);
}

/* ─────────────────────────────────────────
   MODAL
───────────────────────────────────────── */
.modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(9, 8, 5, 0.72);
	backdrop-filter: blur(10px) saturate(0.8);
	-webkit-backdrop-filter: blur(10px) saturate(0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 220ms ease;
	padding: 24px;
	z-index: 100;
}

.modal-backdrop.is-visible {
	opacity: 1;
	pointer-events: auto;
}

.modal {
	background: var(--surface-2);
	border: 1px solid var(--border-mid);
	border-radius: 0;
	padding: 40px 36px 32px;
	max-width: 400px;
	width: 100%;
	position: relative;
	box-shadow: 0 40px 100px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(232, 90, 42, 0.06);
	animation: modalIn 250ms cubic-bezier(0.16, 1, 0.3, 1) both;
	text-align: left;
}

@keyframes modalIn {
	from { opacity: 0; transform: translateY(18px) scale(0.97); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 26px;
	height: 26px;
	font-size: 16px;
	font-weight: 300;
	line-height: 1;
	display: grid;
	place-items: center;
	background: transparent;
	border: 1px solid var(--border);
	color: var(--text-faint);
	border-radius: 0;
	cursor: pointer;
	padding: 0;
	font-family: var(--font-mono);
	transition: color 0.15s, border-color 0.15s;
}

.modal-close:hover {
	color: var(--text);
	border-color: var(--border-mid);
	background: transparent;
	transform: none;
}

.modal h2 {
	font-family: var(--font-display);
	font-size: 26px;
	font-weight: 400;
	font-style: italic;
	color: var(--text);
	margin: 0 0 10px;
	line-height: 1.2;
}

.modal p {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--text-secondary);
	margin: 0 0 28px;
}

.modal-actions {
	display: flex;
	gap: 10px;
}

.modal-cta {
	flex: 1;
	padding: 11px 14px;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: var(--accent);
	border: none;
	color: #fff;
	cursor: pointer;
	border-radius: 0;
	transition: background 0.15s;
}

.modal-cta:hover {
	background: #f06535;
	transform: none;
}

.modal-ghost {
	flex: 1;
	padding: 11px 14px;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: transparent;
	border: 1px solid var(--border-mid);
	color: var(--text-secondary);
	cursor: pointer;
	border-radius: 0;
	transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.modal-ghost:hover {
	border-color: rgba(240, 228, 208, 0.25);
	color: var(--text);
	background: rgba(240, 228, 208, 0.04);
	transform: none;
}

.modal-close:focus-visible,
.modal-cta:focus-visible,
.modal-ghost:focus-visible {
	outline: 1.5px solid rgba(232, 90, 42, 0.5);
	outline-offset: 2px;
}

/* ─────────────────────────────────────────
   ANIMATIONS (referenced by JS/legacy classes)
───────────────────────────────────────── */
@keyframes slideDown {
	from { opacity: 0; transform: translateY(-10px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes float-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-up {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes modal-pop {
	from { opacity: 0; transform: translateY(8px) scale(0.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─────────────────────────────────────────
   SCROLLBAR
───────────────────────────────────────── */
::-webkit-scrollbar        { width: 4px; height: 4px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: var(--text-faint); }
::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }

/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */
@media (max-width: 720px) {
	.site-header { padding: 14px 20px; }
	main { padding: 44px 20px 72px; }
	input[type="search"] { font-size: 20px; }
}

@media (max-width: 480px) {
	.site-header { padding: 12px 16px; }
	main { padding: 36px 16px 60px; }

	input[type="search"] { font-size: 17px; }

	.search-row {
		grid-template-columns: 1fr;
	}

	.search-row > button[type="submit"] {
		padding: 12px 0 14px;
		text-align: left;
		border-top: 1px solid var(--border);
	}

	.modal { padding: 28px 20px 24px; }
	.modal-actions { flex-direction: column; }
}