:root {
	--title: "Knight & Rook — Fine Dining Menu";
	--author: "Matt Cannon";
	--contact: "mc@mattcannon.design";
	--description: "A high-end luxury restaurant menu card for Knight & Rook, an upscale steakhouse and seafood dining experience with locations in New York, Hollywood, and London. Designed to feel like holding a real printed menu — a dark card resting on a wood surface, casting deep shadows that give it genuine physical weight. Move your mouse and the card tilts and follows with a smooth, natural lag, like picking up a real object. The color palette pairs near-black charcoal and deep burgundy with carefully balanced warm gold accents, creating an exclusive atmosphere that feels expensive without being heavy — the kind of restrained luxury you'd find in a Michelin-starred dining room. Features obsessively spaced serif typography, chess piece icons as section markers, and a two-column drinks layout. Fully responsive across every screen size, with fluid typography and a layout that adapts gracefully to mobile. Sections animate in softly on load. Includes a print stylesheet for clean output on paper or PDF.";
	--keywords: "cpc-menu-layout, codepenchallenge, restaurant menu, fine dining, steakhouse, seafood, luxury, high-end, upscale, dark UI, wood grain, menu card, typography, Cormorant, Cormorant SC, DM Mono, gold, chess knight, chess rook, Font Awesome, responsive, clamp, CSS Grid, keyframe animations, requestAnimationFrame, lerp, 3D tilt, CSS gradients, print stylesheet, Google Fonts";
	--last-modified: "2026-05-11";
	--content-language: "en";
	--generator: "HTML5, CSS3, Keyframe Animations, CSS Custom Properties, CSS Grid, CSS clamp(), Google Fonts, Font Awesome 6";
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

:root {
	--card: #111318;
	--ink: #e8e0d0;
	--muted: rgba(232, 224, 208, 0.38);
	--rule: rgba(232, 224, 208, 0.1);
	--gold: #c8a870;
	--gold-dim: rgba(200, 168, 112, 0.5);
}

html,
body {
	min-height: 100%;
}

body {
	font-family: "Cormorant", Georgia, serif;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

.scene {
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding: clamp(2.5rem, 7vw, 5rem) clamp(1rem, 5vw, 3rem);
	background-color: #0f0608;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
		repeating-linear-gradient(
			90.8deg,
			transparent 0px,
			transparent 3px,
			rgba(255, 255, 255, 0.012) 3px,
			rgba(255, 255, 255, 0.012) 4px
		),
		repeating-linear-gradient(
			89.5deg,
			transparent 0px,
			transparent 11px,
			rgba(0, 0, 0, 0.06) 11px,
			rgba(0, 0, 0, 0.06) 12px
		),
		repeating-linear-gradient(
			90.2deg,
			transparent 0px,
			transparent 28px,
			rgba(255, 255, 255, 0.018) 28px,
			rgba(255, 255, 255, 0.018) 29px
		),
		linear-gradient(175deg, #1e0a0e 0%, #0f0608 40%, #160810 70%, #120608 100%);
	perspective: 1400px;
}

.menu {
	width: 100%;
	max-width: 660px;
	background: var(--card);
	color: var(--ink);
	padding: clamp(3rem, 8vw, 5rem) clamp(2.5rem, 7vw, 4.5rem);
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.4),
		0 16px 40px rgba(0, 0, 0, 0.5), 0 48px 100px rgba(0, 0, 0, 0.35),
		inset 0 0 0 1px rgba(232, 224, 208, 0.06);
	transform-style: preserve-3d;
	will-change: transform;
	animation: arrive 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes arrive {
	from {
		opacity: 0;
		transform: translateY(50px) rotateX(4deg);
	}
	to {
		opacity: 1;
		transform: translateY(0) rotateX(0deg);
	}
}

.masthead {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 3.5rem;
	padding-bottom: 3rem;
	position: relative;
}

.masthead::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--rule);
	box-shadow: 0 3px 0 var(--rule);
}

.logomark {
	margin-bottom: 1.75rem;
	opacity: 0;
	animation: fadeIn 0.9s ease 0.3s forwards;
}

.logo-circle {
	width: clamp(64px, 14vw, 84px);
	height: clamp(64px, 14vw, 84px);
	border-radius: 50%;
	border: 1px solid var(--gold);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	color: var(--gold);
}

.logo-circle::before {
	content: "";
	position: absolute;
	inset: 5px;
	border-radius: 50%;
	border: 1px solid rgba(200, 168, 112, 0.22);
}

.logo-circle i {
	font-size: clamp(1.6rem, 4vw, 2rem);
	position: relative;
	z-index: 1;
}

.name-lockup {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	opacity: 0;
	animation: fadeUp 0.8s ease 0.2s forwards;
}

.est-line {
	font-family: "DM Mono", monospace;
	font-size: 0.55rem;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--muted);
}

.name-lockup h1 {
	font-family: "Cormorant SC", Georgia, serif;
	font-size: clamp(2.2rem, 6vw, 3.6rem);
	font-weight: 300;
	letter-spacing: 0.18em;
	color: var(--ink);
	line-height: 1;
	text-align: center;
}

.name-lockup h1 em {
	font-family: "Cormorant", serif;
	font-style: italic;
	font-weight: 300;
	font-size: 0.85em;
	letter-spacing: 0.05em;
	color: var(--gold);
	padding: 0 0.1em;
}

.cities {
	font-family: "DM Mono", monospace;
	font-size: 0.52rem;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--muted);
}

.menu section {
	margin-bottom: 2.75rem;
	opacity: 0;
	animation: fadeUp 0.7s ease both;
}

.menu section:nth-child(2) {
	animation-delay: 0.35s;
}
.menu section:nth-child(3) {
	animation-delay: 0.45s;
}
.menu section:nth-child(4) {
	animation-delay: 0.55s;
}
.menu section:nth-child(5) {
	animation-delay: 0.65s;
}

.menu h2 {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.6rem;
}

.menu h2::before,
.menu h2::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--rule);
}

.menu h2 span {
	font-family: "DM Mono", monospace;
	font-size: 0.56rem;
	font-weight: 300;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--gold);
	white-space: nowrap;
}

.menu h2 i {
	font-size: 0.75rem;
	color: var(--gold-dim);
	flex-shrink: 0;
}

.section-note {
	font-family: "Cormorant", serif;
	font-style: italic;
	font-size: 0.82rem;
	color: var(--muted);
	text-align: center;
	letter-spacing: 0.04em;
	margin-bottom: 1.4rem;
	margin-top: -0.5rem;
}

.menu dl {
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: clamp(1.5rem, 4vw, 3rem);
}

.menu dt {
	grid-column: 1;
	font-family: "Cormorant", serif;
	font-size: clamp(1rem, 1.9vw, 1.12rem);
	font-weight: 400;
	letter-spacing: 0.03em;
	color: var(--ink);
	padding: 1.05rem 0;
	border-top: 1px solid var(--rule);
	line-height: 1.25;
}

.menu dt:first-of-type {
	border-top: none;
	padding-top: 0;
}

.menu dt span {
	display: block;
	font-style: italic;
	font-weight: 300;
	font-size: 0.85em;
	color: var(--muted);
	letter-spacing: 0.01em;
	margin-top: 0.22rem;
	line-height: 1.5;
}

.menu dd {
	grid-column: 2;
	font-family: "DM Mono", monospace;
	font-size: 0.7rem;
	font-weight: 300;
	letter-spacing: 0.06em;
	color: var(--muted);
	padding: 1.05rem 0;
	border-top: 1px solid var(--rule);
	white-space: nowrap;
	align-self: start;
}

.menu dl > dd:first-of-type {
	border-top: none;
	padding-top: 0;
}
.menu dt:first-of-type + dd {
	border-top: none;
	padding-top: 0;
}

.menu dt.sig {
	color: var(--ink);
}
.menu dt.sig span {
	color: var(--muted);
}
.menu dd.sig {
	color: var(--gold);
}

.menu dt:not(:first-of-type) {
	transition: color 0.2s;
}
.menu dt:hover {
	color: #fff;
}
.menu dt:hover span {
	color: rgba(232, 224, 208, 0.6);
}

footer {
	margin-top: 3rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
}

.footer-rule {
	width: 100%;
	height: 1px;
	background: var(--rule);
	position: relative;
	margin-bottom: 0.5rem;
}

.footer-rule::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--rule);
}

.footer-rooks {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	color: var(--gold-dim);
}

.footer-rooks i {
	font-size: 0.75rem;
}

.footer-legal {
	font-family: "Cormorant", serif;
	font-style: italic;
	font-size: 0.72rem;
	color: var(--muted);
	text-align: center;
	letter-spacing: 0.02em;
	opacity: 0.6;
	max-width: 38ch;
	line-height: 1.6;
}

.drinks-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
}

.drinks-col {
	padding-right: 2rem;
}
.drinks-col--right {
	padding-right: 0;
	padding-left: 2rem;
	border-left: 1px solid var(--rule);
}

.drinks-col-head {
	font-family: "DM Mono", monospace;
	font-size: 0.52rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 1rem;
}

.drinks-col dl {
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: 1rem;
}

.drinks-col dt {
	grid-column: 1;
	font-family: "Cormorant", serif;
	font-size: clamp(0.88rem, 1.6vw, 1rem);
	font-weight: 400;
	letter-spacing: 0.03em;
	color: var(--ink);
	padding: 0.85rem 0;
	border-top: 1px solid var(--rule);
	line-height: 1.25;
}

.drinks-col dt:first-of-type {
	border-top: none;
	padding-top: 0;
}

.drinks-col dt span {
	display: block;
	font-style: italic;
	font-weight: 300;
	font-size: 0.85em;
	color: var(--muted);
	margin-top: 0.18rem;
	line-height: 1.5;
}

.drinks-col dd {
	grid-column: 2;
	font-family: "DM Mono", monospace;
	font-size: 0.65rem;
	font-weight: 300;
	letter-spacing: 0.06em;
	color: var(--muted);
	padding: 0.85rem 0;
	border-top: 1px solid var(--rule);
	white-space: nowrap;
	align-self: start;
}

.drinks-col dt:first-of-type + dd {
	border-top: none;
	padding-top: 0;
}

.footer-drinks-note {
	font-family: "Cormorant", serif;
	font-style: italic;
	font-size: 0.92rem;
	color: var(--gold-dim);
	text-align: center;
	letter-spacing: 0.04em;
}

@media (max-width: 520px) {
	.drinks-cols {
		grid-template-columns: 1fr;
	}
	.drinks-col--right {
		padding-left: 0;
		border-left: none;
		border-top: 1px solid var(--rule);
		padding-top: 1.5rem;
		margin-top: 1rem;
	}
	.drinks-col {
		padding-right: 0;
	}
}

.server-note {
	font-family: "Cormorant", serif;
	font-style: italic;
	font-size: clamp(1rem, 1.9vw, 1.12rem);
	color: var(--muted);
	text-align: center;
	letter-spacing: 0.04em;
	padding: 0.5rem 0 1rem;
}

.footer-drink {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 0.5rem;
}

.footer-drink::before,
.footer-drink::after {
	content: "";
	display: block;
	width: 32px;
	height: 1px;
	background: var(--gold-dim);
}

.footer-drink span {
	font-family: "Cormorant", serif;
	font-style: italic;
	font-size: 0.88rem;
	letter-spacing: 0.08em;
	color: var(--gold-dim);
	white-space: nowrap;
}

@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

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

@media (max-width: 480px) {
	.menu {
		padding: 2.5rem 1.75rem;
	}
	.menu dl {
		column-gap: 1.25rem;
	}
}

@media print {
	.scene {
		background: white;
		padding: 0;
	}
	.menu {
		box-shadow: none;
		background: white;
		color: black;
		animation: none;
		opacity: 1;
	}
	.menu section {
		animation: none;
		opacity: 1;
	}
	.name-lockup,
	.logomark {
		animation: none;
		opacity: 1;
	}
	:root {
		--ink: #111;
		--muted: #555;
		--gold: #8a6a30;
		--rule: rgba(0, 0, 0, 0.15);
		--gold-dim: rgba(138, 106, 48, 0.6);
	}
}