:root {
	--paper:        #f3ead6;
	--paper-soft:   #f8f1de;
	--paper-deep:   #ebe0c4;
	--ink:          #1a1614;
	--ink-soft:     #4a3f36;
	--ink-faint:    rgba(26, 22, 20, 0.45);
	--indigo:       #3b3aa9;
	--indigo-deep:  #2a2980;
	--yolk:         #e9a82a;
	--paprika:      #c0402a;
	--rule:         rgba(26, 22, 20, 0.22);
	--rule-soft:    rgba(26, 22, 20, 0.10);
	--ease-out:     cubic-bezier(.22, .8, .2, 1);
}

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

html { scroll-behavior: smooth; }

html, body {
	font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

body {
	background-color: var(--paper);
	background-image:
		radial-gradient(ellipse 80% 60% at 18% 12%, rgba(233, 168, 42, 0.10), transparent 60%),
		radial-gradient(ellipse 70% 70% at 82% 88%, rgba(192, 64, 42, 0.06), transparent 65%),
		radial-gradient(ellipse 60% 50% at 50% 50%, transparent 60%, rgba(26, 22, 20, 0.04) 100%);
	color: var(--ink);
	font-size: 15px;
	line-height: 1.6;
	min-height: 100vh;
	overflow-x: hidden;
	position: relative;
	-webkit-font-smoothing: antialiased;
	font-feature-settings: "ss01", "kern";
}

/* ──────────── Paper grain overlay ──────────── */

.grain {
	position: fixed;
	inset: -50%;
	pointer-events: none;
	z-index: 1000;
	opacity: 0.55;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.10 0 0 0 0 0.08 0 0 0 0 0.06 0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
	background-size: 220px 220px;
}

/* ──────────── Masthead ──────────── */

.masthead {
	max-width: 1040px;
	margin: 0 auto;
	padding: 2.25rem 2.25rem 4.5rem;
	position: relative;
}

.rule-top {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.7em;
	font-size: 11px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--ink-soft);
	border-top: 1px solid var(--ink);
	border-bottom: 1px solid var(--ink);
	padding: 0.65rem 0;
	margin-bottom: 4.5rem;
	flex-wrap: wrap;
	font-weight: 400;
}

.rule-top .bullet {
	color: var(--paprika);
	font-size: 0.7em;
	transform: translateY(-1px);
}

.hero {
	text-align: center;
	position: relative;
	max-width: 720px;
	margin: 0 auto;
}

.logo {
	width: 200px;
	height: 200px;
	display: block;
	margin: 0 auto 0.5rem;
	filter: drop-shadow(0 18px 28px rgba(26, 22, 20, 0.10));
	transition: transform 0.7s var(--ease-out);
	will-change: transform;
}

.hero:hover .logo {
	transform: rotate(-4deg) scale(1.04);
}

/* The big stacked masthead lockup */
.brand {
	font-family: 'Fraunces', 'Times New Roman', serif;
	font-size: clamp(4.75rem, 14.5vw, 10.5rem);
	line-height: 0.84;
	letter-spacing: -0.045em;
	color: var(--ink);
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 1.6rem;
	font-weight: 850;
}

.brand-main {
	font-variation-settings: "opsz" 144, "wght" 850, "SOFT" 50, "WONK" 1;
}

.brand-italic {
	font-style: italic;
	font-variation-settings: "opsz" 144, "wght" 380, "SOFT" 100, "WONK" 1;
	color: var(--paprika);
	margin-top: -0.04em;
	letter-spacing: -0.025em;
}

.brand-dot {
	color: var(--yolk);
	display: inline-block;
	transform: translateY(-0.05em);
}

.dek {
	font-family: 'Fraunces', serif;
	font-variation-settings: "opsz" 36, "wght" 380, "SOFT" 80, "WONK" 0;
	font-style: italic;
	font-size: clamp(1.05rem, 1.6vw, 1.3rem);
	line-height: 1.55;
	max-width: 38ch;
	margin: 0.5rem auto 0.4rem;
	color: var(--ink-soft);
}

.dek em {
	color: var(--paprika);
	font-style: italic;
	font-variation-settings: "opsz" 36, "wght" 600, "SOFT" 100, "WONK" 1;
}

.aside {
	font-family: 'Caveat', cursive;
	font-size: 1.25rem;
	color: var(--indigo);
	margin-bottom: 2.25rem;
	transform: rotate(-1.5deg);
	display: inline-block;
}

.cta-row {
	display: inline-flex;
	gap: 0.85rem;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
}

.cta {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.95rem 1.6rem;
	border: 1.5px solid var(--ink);
	border-radius: 0;
	background: var(--paper);
	color: var(--ink);
	transition: transform 0.2s var(--ease-out),
		box-shadow 0.2s var(--ease-out),
		background 0.2s var(--ease-out),
		color 0.2s var(--ease-out);
	box-shadow: 0 0 0 var(--ink);
}

.cta-primary {
	background: var(--ink);
	color: var(--paper);
}

.cta .arrow { transition: transform 0.25s var(--ease-out); }
.cta:hover .arrow { transform: translateX(3px); }

.cta-primary:hover {
	background: var(--indigo);
	border-color: var(--indigo);
	color: var(--paper-soft);
	transform: translate(-3px, -3px);
	box-shadow: 5px 5px 0 var(--ink);
}

.cta-ghost:hover {
	background: var(--yolk);
	transform: translate(-3px, -3px);
	box-shadow: 5px 5px 0 var(--ink);
}

/* ──────────── Decorative stamp ──────────── */

.stamp {
	position: absolute;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 10px;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--paprika);
	border: 2px solid var(--paprika);
	padding: 0.55rem 0.85rem;
	line-height: 1.45;
	text-align: center;
	opacity: 0.55;
	pointer-events: none;
	mix-blend-mode: multiply;
	z-index: 2;
	box-shadow: inset 0 0 0 1px var(--paprika);
}

.stamp-tr {
	top: 7rem;
	right: 2.5rem;
	transform: rotate(9deg);
}

.stamp-bl {
	bottom: -1.5rem;
	left: 1.5rem;
	transform: rotate(-7deg);
	color: var(--indigo);
	border-color: var(--indigo);
	box-shadow: inset 0 0 0 1px var(--indigo);
}

/* ──────────── Ornament dividers ──────────── */

.ornament {
	display: flex;
	align-items: center;
	gap: 1rem;
	max-width: 360px;
	margin: 4rem auto 0;
	color: var(--ink-faint);
	font-size: 14px;
	letter-spacing: 0.5em;
}

.orn-line {
	flex: 1;
	height: 1px;
	background: var(--rule);
}

.orn-mark {
	font-size: 0.85em;
	letter-spacing: 0.4em;
	transform: translateY(-1px);
	color: var(--paprika);
}

.ornament-foot {
	margin: 0 auto 1.25rem;
}

.ornament-between {
	margin: 4rem auto;
	max-width: 460px;
}

/* ──────────── Menu ──────────── */

.menu {
	max-width: 1040px;
	margin: 0 auto;
	padding: 4rem 2.25rem 6rem;
	position: relative;
}

.menu-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 2rem;
	border-bottom: 2px solid var(--ink);
	padding-bottom: 1.25rem;
	margin-bottom: 0.5rem;
}

.menu-eyebrow {
	font-size: 11px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin-bottom: 0.5rem;
}

.menu-title {
	font-family: 'Fraunces', serif;
	font-variation-settings: "opsz" 144, "wght" 850, "SOFT" 30, "WONK" 0;
	font-size: clamp(2.5rem, 6vw, 4.75rem);
	line-height: 0.95;
	letter-spacing: -0.035em;
	color: var(--ink);
}

.menu-title em {
	font-style: italic;
	font-variation-settings: "opsz" 144, "wght" 700, "SOFT" 100, "WONK" 1;
	color: var(--paprika);
}

.menu-sub {
	font-family: 'Caveat', cursive;
	font-size: 1.45rem;
	line-height: 1.15;
	color: var(--indigo);
	transform: rotate(-2deg);
	max-width: 22ch;
	flex-shrink: 0;
}

/* ──────────── Course / section header ──────────── */

.course {
	margin-top: 2.5rem;
}

.course-head {
	text-align: center;
	margin: 0 auto 2.5rem;
	max-width: 640px;
	padding: 0 1rem;
}

.course-eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.85rem;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin-bottom: 1.25rem;
}

.course-eyebrow .rule {
	flex: 1;
	height: 1px;
	background: var(--rule);
	max-width: 120px;
}

.course-eyebrow .dingbat {
	color: var(--paprika);
	font-size: 10px;
	transform: translateY(-1px);
}

.course-eyebrow .label {
	white-space: nowrap;
	font-feature-settings: "tnum", "lnum";
}

.course-title {
	font-family: 'Fraunces', serif;
	font-size: clamp(2.5rem, 5.5vw, 4.5rem);
	line-height: 0.95;
	letter-spacing: -0.035em;
	color: var(--ink);
	margin-bottom: 0.5rem;
	font-weight: 850;
}

.course-title .t-main {
	font-variation-settings: "opsz" 144, "wght" 850, "SOFT" 50, "WONK" 1;
}

.course-title .t-italic {
	font-style: italic;
	font-variation-settings: "opsz" 144, "wght" 380, "SOFT" 100, "WONK" 1;
	color: var(--paprika);
	letter-spacing: -0.025em;
}

.course-title .t-dot {
	color: var(--yolk);
	display: inline-block;
	transform: translateY(-0.05em);
}

.course-sub {
	font-family: 'Fraunces', serif;
	font-style: italic;
	font-variation-settings: "opsz" 24, "wght" 400, "SOFT" 70, "WONK" 0;
	font-size: 1.1rem;
	color: var(--ink-soft);
	letter-spacing: 0.005em;
}

/* ──────────── "More courses simmering" closer ──────────── */

.next-course {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	max-width: 460px;
	margin: 4rem auto 0;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 10.5px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.next-course .rule {
	flex: 1;
	height: 1px;
	background: var(--rule);
}

.next-course-label::before,
.next-course-label::after {
	content: '✦';
	color: var(--paprika);
	margin: 0 0.6em;
	font-size: 0.85em;
	letter-spacing: 0;
}

/* ──────────── Dishes ──────────── */

.dishes {
	list-style: none;
}

.dishes > li {
	border-bottom: 1px solid var(--rule);
}

.dish {
	display: grid;
	grid-template-columns: 90px 1fr;
	gap: 1.5rem;
	padding: 1.6rem 0.5rem;
	text-decoration: none;
	color: inherit;
	transition: background 0.25s var(--ease-out),
		padding 0.25s var(--ease-out);
	position: relative;
}

.dish::before {
	content: '';
	position: absolute;
	left: -2rem;
	top: 50%;
	width: 0;
	height: 1.5px;
	background: var(--paprika);
	transition: width 0.35s var(--ease-out);
}

.dish:hover {
	background: var(--paper-soft);
	padding-left: 1.25rem;
}

.dish:hover::before {
	width: 1.5rem;
}

.dish-num {
	font-family: 'Fraunces', serif;
	font-variation-settings: "opsz" 144, "wght" 250, "SOFT" 0, "WONK" 0;
	font-size: 3.5rem;
	line-height: 0.85;
	color: var(--ink-soft);
	letter-spacing: -0.06em;
	font-feature-settings: "tnum", "lnum";
	transition: color 0.25s var(--ease-out);
	padding-top: 0.25rem;
}

.dish:hover .dish-num {
	color: var(--paprika);
	font-variation-settings: "opsz" 144, "wght" 250, "SOFT" 0, "WONK" 1;
	font-style: italic;
}

.dish-body {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	min-width: 0;
}

.dish-headline {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	min-width: 0;
}

.dish-name {
	font-family: 'Fraunces', serif;
	font-variation-settings: "opsz" 80, "wght" 700, "SOFT" 30, "WONK" 0;
	font-size: clamp(1.5rem, 2.5vw, 1.85rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--ink);
	transition: font-variation-settings 0.35s var(--ease-out),
		color 0.25s var(--ease-out);
	font-weight: 700;
	white-space: nowrap;
	flex-shrink: 0;
}

.dish:hover .dish-name {
	color: var(--indigo);
	font-style: italic;
	font-variation-settings: "opsz" 80, "wght" 750, "SOFT" 100, "WONK" 1;
}

.dish-leader {
	flex: 1;
	min-width: 1rem;
	border-bottom: 2px dotted var(--rule);
	height: 1px;
	transform: translateY(-7px);
	margin: 0 0.25rem;
}

.dish-link {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink);
	transition: color 0.25s var(--ease-out),
		letter-spacing 0.25s var(--ease-out);
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

.dish-link .arrow {
	display: inline-block;
	transition: transform 0.25s var(--ease-out);
}

.dish:hover .dish-link {
	color: var(--paprika);
	letter-spacing: 0.22em;
}

.dish:hover .dish-link .arrow {
	transform: translateX(5px);
}

.dish-desc {
	font-family: 'Fraunces', serif;
	font-variation-settings: "opsz" 24, "wght" 400, "SOFT" 70, "WONK" 0;
	font-style: italic;
	font-size: 1.08rem;
	line-height: 1.45;
	color: var(--ink-soft);
	max-width: 62ch;
}

.dish-tags {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 10.5px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-top: 0.25rem;
}

/* ──────────── Footer ──────────── */

.site-footer {
	border-top: 1px solid var(--rule);
	background: var(--paper-deep);
	text-align: center;
	padding: 3.5rem 2rem 4rem;
	font-size: 12px;
	letter-spacing: 0.05em;
	color: var(--ink-soft);
	position: relative;
	overflow: hidden;
}

.site-footer .ornament-foot {
	margin-top: 0;
	margin-bottom: 1.5rem;
}

.footer-credits {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 12px;
	letter-spacing: 0.1em;
}

.site-footer a {
	color: var(--indigo);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s var(--ease-out);
}

.site-footer a:hover {
	border-color: var(--indigo);
}

.footer-credits .dot {
	margin: 0 0.6rem;
	color: var(--paprika);
}

.footer-handwritten {
	font-family: 'Caveat', cursive;
	font-size: 1.15rem;
	color: var(--paprika);
	letter-spacing: 0;
	display: inline-block;
	transform: translateY(2px) rotate(-2deg);
}

.footer-byline {
	font-family: 'Caveat', cursive;
	font-size: 1.2rem;
	margin-top: 0.85rem;
	color: var(--ink-soft);
	line-height: 1;
	letter-spacing: 0;
}

.footer-byline a {
	color: var(--indigo);
	text-decoration: none;
	border-bottom: 1.5px solid transparent;
	transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

.footer-byline a:hover {
	border-bottom-color: var(--indigo);
	color: var(--indigo-deep);
}

/* ──────────── Animations ──────────── */

@keyframes letterIn {
	from {
		opacity: 0;
		transform: translateY(40px) rotate(-3deg);
		filter: blur(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0) rotate(0);
		filter: blur(0);
	}
}

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

@keyframes drawRule {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

@keyframes stampIn {
	from { opacity: 0; transform: rotate(0) scale(1.4); }
	to   { opacity: 0.55; }
}

.rule-top {
	transform-origin: center;
	animation: drawRule 1s var(--ease-out) 0.05s both;
}

.brand-main, .brand-italic {
	display: inline-block;
	opacity: 0;
	animation: letterIn 1.1s var(--ease-out) forwards;
}
.brand-main   { animation-delay: 0.35s; }
.brand-italic { animation-delay: 0.55s; }

.logo, .dek, .cta-row, .ornament {
	opacity: 0;
	animation: fadeUp 0.85s var(--ease-out) forwards;
}
.logo     { animation-delay: 0.05s; }
.dek      { animation-delay: 0.85s; }
.cta-row  { animation-delay: 1s; }
.ornament { animation-delay: 1.15s; }

.stamp-tr { animation: stampIn 0.7s var(--ease-out) 1.4s both; }

.course-head {
	opacity: 0;
	animation: fadeUp 0.8s var(--ease-out) 0.1s forwards;
}

.dishes > li {
	opacity: 0;
	animation: fadeUp 0.7s var(--ease-out) forwards;
}
.dishes > li:nth-child(1) { animation-delay: 0.25s; }
.dishes > li:nth-child(2) { animation-delay: 0.33s; }
.dishes > li:nth-child(3) { animation-delay: 0.41s; }
.dishes > li:nth-child(4) { animation-delay: 0.49s; }
.dishes > li:nth-child(5) { animation-delay: 0.57s; }

.next-course {
	opacity: 0;
	animation: fadeUp 0.7s var(--ease-out) 0.7s forwards;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ──────────── Responsive ──────────── */

@media (max-width: 760px) {
	.masthead { padding: 1.5rem 1.25rem 3rem; }
	.rule-top {
		font-size: 9px;
		gap: 0.5em;
		letter-spacing: 0.22em;
		margin-bottom: 3rem;
	}
	.logo { width: 140px; height: 140px; }

	.menu { padding: 3rem 1.25rem 5rem; }
	.menu-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
		padding-bottom: 1rem;
	}
	.menu-sub { transform: rotate(-1deg); font-size: 1.25rem; }

	.dish {
		grid-template-columns: 50px 1fr;
		gap: 1rem;
		padding: 1.25rem 0.25rem;
	}
	.dish-num { font-size: 2.25rem; }
	.dish-name { font-size: 1.3rem; }
	.dish-headline { flex-wrap: wrap; gap: 0.4rem 0.6rem; }
	.dish-leader { display: none; }
	.dish-desc { font-size: 1rem; }
	.dish:hover { padding-left: 0.5rem; }
	.dish:hover::before { width: 0.75rem; left: -1rem; }

	.stamp-tr { top: 4rem; right: 1rem; font-size: 9px; padding: 0.4rem 0.65rem; }
	.stamp-bl { left: 0.5rem; bottom: -1rem; font-size: 9px; }

	.cta { padding: 0.85rem 1.25rem; font-size: 11px; }

	.course { margin-top: 1.5rem; }
	.course-head { margin-bottom: 1.75rem; }
	.course-eyebrow { gap: 0.5rem; font-size: 9px; letter-spacing: 0.22em; }
	.course-eyebrow .rule { max-width: 60px; }
	.course-title { font-size: 2.5rem; }
	.course-sub { font-size: 0.98rem; }

	.next-course { gap: 0.5rem; font-size: 9px; letter-spacing: 0.22em; }
	.next-course-label::before,
	.next-course-label::after { margin: 0 0.4em; }
}

@media (max-width: 420px) {
	.brand { font-size: 4.25rem; }
	.menu-title { font-size: 2.25rem; }
	.dish-num { font-size: 1.85rem; }
	.dish-name { font-size: 1.15rem; }
}

/* ---------- contact / generic modal ---------- */

.modal-dialog {
	border: none;
	padding: 0;
	background: transparent;
	max-width: min(520px, calc(100vw - 2rem));
	width: 100%;
	color: var(--ink);
	margin: auto;
	inset: 0;
}

.modal-dialog::backdrop {
	background: rgba(26, 22, 20, 0.55);
	backdrop-filter: blur(2px);
}

.modal-card,
.modal-thanks {
	position: relative;
	background: var(--paper);
	border: 1px solid var(--ink);
	box-shadow:
		0 1px 0 var(--ink),
		8px 8px 0 var(--ink);
	padding: 2.5rem 2.25rem 2rem;
	font-family: 'IBM Plex Mono', monospace;
}

.modal-thanks { text-align: center; }

.modal-close {
	position: absolute;
	top: 0.55rem;
	right: 0.65rem;
	background: transparent;
	border: none;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 1.05rem;
	color: var(--ink-soft);
	cursor: pointer;
	padding: 0.35rem 0.5rem;
	line-height: 1;
	transition: color 0.15s var(--ease-out), transform 0.2s var(--ease-out);
}

.modal-close:hover {
	color: var(--paprika);
	transform: rotate(90deg);
}

.modal-eyebrow {
	font-family: 'IBM Plex Mono', monospace;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	font-size: 10px;
	color: var(--paprika);
	margin: 0 0 0.85rem;
	text-align: center;
}

.modal-title {
	font-family: 'Fraunces', serif;
	font-size: 2.2rem;
	line-height: 1;
	font-style: italic;
	margin: 0 0 1.1rem;
	color: var(--ink);
	text-align: center;
}

.modal-dot {
	color: var(--yolk);
}

.modal-dek {
	font-family: 'Fraunces', serif;
	font-size: 1.05rem;
	line-height: 1.5;
	color: var(--ink-soft);
	text-align: center;
	margin: 0 auto 1.5rem;
	max-width: 30ch;
}

.modal-fields {
	margin-bottom: 1.25rem;
}

.modal-label {
	display: block;
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-bottom: 0.45rem;
}

.modal-input {
	width: 100%;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 1rem;
	padding: 0.85rem 1rem;
	background: var(--paper-soft);
	border: 1px solid var(--rule);
	border-radius: 0;
	color: var(--ink);
	outline: none;
	transition: border-color 0.15s var(--ease-out), background 0.15s var(--ease-out);
	-webkit-appearance: none;
	appearance: none;
}

.modal-input::placeholder {
	color: var(--ink-faint);
}

.modal-input:focus {
	border-color: var(--ink);
	background: var(--paper);
}

.modal-textarea {
	resize: vertical;
	min-height: 5.5rem;
	line-height: 1.5;
	font-size: 0.95rem;
	margin-bottom: 0.25rem;
}

.modal-fields .modal-label + .modal-input {
	margin-bottom: 1rem;
}

.modal-honey {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.modal-actions {
	display: flex;
	justify-content: center;
	margin-bottom: 0.75rem;
}

.modal-submit {
	width: 100%;
	justify-content: center;
}

.modal-submit:disabled {
	opacity: 0.6;
	cursor: progress;
}

.modal-error {
	font-size: 0.85rem;
	color: var(--paprika);
	text-align: center;
	margin: 0.5rem 0 0;
	font-family: 'IBM Plex Mono', monospace;
}

.modal-aside {
	font-family: 'Caveat', cursive;
	font-size: 1.05rem;
	color: var(--indigo);
	text-align: center;
	margin: 1rem 0 0;
}

.modal-thanks .cta {
	margin-top: 0.5rem;
}

@media (max-width: 480px) {
	.modal-card,
	.modal-thanks {
		padding: 2rem 1.5rem 1.6rem;
		box-shadow:
			0 1px 0 var(--ink),
			5px 5px 0 var(--ink);
	}
	.modal-title { font-size: 1.85rem; }
}