/* =========================================================================
   DIVE BAR — theme styles.
   This file should end up holding the pen's CSS verbatim
   (codepen.io/ahoidahl/pen/ogLMjyo). codepen.io is blocked from the remote
   build environment, so paste it in by hand (or allow codepen.io in the
   environment network policy and have Claude pull it), replacing the
   TEMPORARY SCAFFOLD below. When you do, restyle .badge/.tags/.theme_actions
   in the pen's own visual language — they're the "theme for sale" chrome
   that has to survive the swap.
   Keep a dark background on html {} — without it the page flashes white on
   load (same rule as the main site).
   ========================================================================= */

/* ----- TEMPORARY SCAFFOLD (delete when the pen CSS lands) ----- */

* {
	box-sizing: border-box;
}

html {
	background: #0c0a08;
}

body {
	margin: 0;
	min-height: 100svh;
	display: grid;
	place-items: center;
	background: radial-gradient(120% 100% at 50% 0%, #1a120c 0%, #0c0a08 60%);
	color: #e8ddcf;
	font-family: Georgia, 'Times New Roman', serif;
	line-height: 1.6;
}

.theme_demo {
	max-width: 640px;
	padding: 4rem 1.5rem;
}

.badge {
	display: inline-block;
	margin: 0 0 1rem;
	padding: .4rem 1rem;
	border: 1px solid #c98f3f;
	border-radius: 999vw;
	color: #e3a24b;
	font-family: system-ui, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
}

h1 {
	margin: 0 0 1rem;
	font-size: clamp(3rem, 10vw, 5rem);
	font-weight: 400;
	letter-spacing: .02em;
	color: #f4ead9;
	text-shadow: 0 0 30px rgba(227, 162, 75, .35);
}

.tags {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0 0 2rem;
	padding: 0;
}

.tags li {
	padding: .25rem .7rem;
	border: 1px solid rgba(232, 221, 207, .25);
	border-radius: 999vw;
	font-family: system-ui, sans-serif;
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: rgba(232, 221, 207, .7);
}

.theme_about p {
	margin: 0 0 1rem;
}

.theme_actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 2.5rem;
}

.btn {
	display: inline-block;
	padding: .8rem 1.6rem;
	border-radius: 6px;
	font-family: system-ui, sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	transition: transform .15s ease, background .15s ease, color .15s ease;
}

.btn:hover,
.btn:focus-visible {
	transform: translateY(-2px);
}

.btn_solid {
	background: #e3a24b;
	color: #14100b;
}

.btn_solid:hover,
.btn_solid:focus-visible {
	background: #f0b662;
}

.btn_line {
	border: 1px solid rgba(232, 221, 207, .4);
	color: #e8ddcf;
}

.btn_line:hover,
.btn_line:focus-visible {
	border-color: #e3a24b;
	color: #e3a24b;
}

/* ----- END TEMPORARY SCAFFOLD ----- */