/*
	Tammy's Craft Garage — custom overrides
	Loaded after main.css so these rules win. Keeps us out of the SASS build.

	Brand palette — a warm amber -> magenta ramp on a deep warm base.

		The ramp (the identity; used as the hero gradient & UI accents)
			Amber    #ffa230   (lightest / link hover)
			Orange   #ff883a
			Coral    #fe7043   (primary interactive accent: links, focus, underlines)
			Red      #fe584c
			Pink     #fe4055
			Magenta  #fd1067   (hottest / primary-button hover)

		Derived neutrals (carry the page so the ramp stays legible)
			Ink      #1c0d12   (deep warm near-black base; panels use rgba 28,13,18)
			Ink-2    #2a0d10   (text colour on bright accents)
			Paper    #fff3ea   (warm near-white: text & borders, replacing white)
*/

/* ============================================================
   0. Typeface — Caveat & Outfit
   ============================================================ */

	body, input, select, textarea {
		font-family: 'Outfit', sans-serif;
	}

	h1, h2, h3, h4, h5, h6 {
		font-family: 'Caveat', cursive;
		text-transform: none;
		letter-spacing: 0.05rem;
		font-weight: 700;
	}

	#header h1 {
		font-size: 3.5rem;
	}

/* ============================================================
   1. Color palette
   ============================================================ */

/* --- Base text --- */

	body, input, select, textarea {
		color: #fff3ea;
	}

	h1, h2, h3, h4, h5, h6, strong, b {
		color: #fff3ea;
	}

/* Section heading underline -> coral accent */

	h1.major, h2.major, h3.major, h4.major, h5.major, h6.major {
		border-bottom-color: #fe7043;   /* fallback */
		border-image: -webkit-linear-gradient(left, #ffa230, #fe7043, #fd1067) 1;
		border-image: linear-gradient(90deg, #ffa230, #fe7043, #fd1067) 1;
	}

/* --- Links --- */

	a {
		color: #fe7043;
	}

		a:hover {
			color: #ffa230;
		}

/* --- Background: full amber -> magenta brand ramp --- */

	#bg:after {
		background-image: -webkit-linear-gradient(135deg, #ffa230 0%, #ff883a 22%, #fe7043 42%, #fe584c 60%, #fe4055 78%, #fd1067 100%);
		background-image: linear-gradient(135deg, #ffa230 0%, #ff883a 22%, #fe7043 42%, #fe584c 60%, #fe4055 78%, #fd1067 100%);
		-webkit-transform: scale(1.0);
		transform: scale(1.0);
	}

	/* Deep warm veil over the ramp: keeps the six colours glowing but pulls the
	   whole field dark enough that near-white header text and the dark article
	   panels read cleanly on top. */
	#bg:before {
		background-image: none;
		background-color: rgba(28, 13, 18, 0.42);
	}

/* --- Modal panels: dark plum tint --- */

	#main article {
		background-color: rgba(28, 13, 18, 0.88);
	}

/* --- Header structure (logo badge, content rules, nav) --- */

	#header > *:before {
		background-color: #fff3ea !important;
	}

	/* The theme's "use-middle" nav assumes every item is the same width: it
	   draws a fake divider and a connector line at exactly 50%, and removes the
	   middle item's real border. Real labels are never equal width, so that 50%
	   line never lands on a cell boundary -- the menu looks off-centre and the
	   hover highlight bleeds across it. We disable the whole mechanism: hide the
	   fake divider, hide the connector line pointing at the nav, and give the
	   middle item a real border like every other item. The nav then becomes a
	   self-contained, naturally-centred pill that works with any label text. */
	#header nav.use-middle:after {
		display: none !important;
	}

	#header nav:before {
		display: none !important;
	}

	#header nav.use-middle ul li.is-middle {
		border-left: solid 1px #fff3ea;
	}

	#header .logo {
		border-color: #fff3ea;
	}

	#header .content {
		border-color: #fff3ea;
	}

	/* Dark plum backing behind the menu so the cream text reads with strong
	   contrast instead of floating over the mid-tone plum/crimson gradient. */
	#header nav ul {
		border-color: #fff3ea;
		background-color: rgba(28, 13, 18, 0.85);
	}

		#header nav ul li {
			border-left-color: #fff3ea;
			border-top-color: #fff3ea;
		}

			/* Each cell sizes to its label (symmetric padding, no wrapping) so
			   two-word labels stay on one line and every divider sits on a real
			   boundary -- the hover highlight can never spill into a neighbour. */
			#header nav ul li a {
				padding: 0 1.5rem;
				white-space: nowrap;
				font-weight: 700;
			}

			#header nav ul li a:hover {
				background-color: rgba(254, 112, 67, 0.18);
			}

/* --- Home front: heavier title & tagline ---
   The template renders the landing title at weight 600 and the tagline at the
   body's light 300. Push both heavier so the brand reads boldly on arrival. */

	#header .content .inner h1 {
		font-weight: 900;
	}

	#header .content .inner p {
		font-weight: 700;
	}

/* --- Buttons --- */

	input[type="submit"],
	input[type="reset"],
	input[type="button"],
	button,
	.button {
		box-shadow: inset 0 0 0 1px #fe7043;
		color: #fff3ea !important;
	}

		input[type="submit"]:hover,
		input[type="reset"]:hover,
		input[type="button"]:hover,
		button:hover,
		.button:hover {
			background-color: rgba(254, 112, 67, 0.15);
		}

		input[type="submit"]:active,
		input[type="reset"]:active,
		input[type="button"]:active,
		button:active,
		.button:active {
			background-color: rgba(254, 112, 67, 0.3);
		}

		input[type="submit"].primary,
		input[type="reset"].primary,
		input[type="button"].primary,
		button.primary,
		.button.primary {
			background-color: #fe584c;   /* fallback for no-gradient renderers */
			background-image: -webkit-linear-gradient(left, #ff883a 0%, #fe584c 55%, #fd1067 100%);
			background-image: linear-gradient(90deg, #ff883a 0%, #fe584c 55%, #fd1067 100%);
			box-shadow: none;
			color: #2a0d10 !important;
			font-weight: 600;
		}

			input[type="submit"].primary:hover,
			input[type="reset"].primary:hover,
			input[type="button"].primary:hover,
			button.primary:hover,
			.button.primary:hover {
				background-color: #fd1067;
				background-image: -webkit-linear-gradient(left, #fe584c 0%, #fd1067 100%);
				background-image: linear-gradient(90deg, #fe584c 0%, #fd1067 100%);
				box-shadow: none;
				color: #fff3ea !important;
			}

/* --- Form fields --- */

	input[type="text"],
	input[type="password"],
	input[type="email"],
	input[type="tel"],
	select,
	textarea {
		border-color: rgba(255, 243, 234, 0.5);
	}

		input[type="text"]:focus,
		input[type="password"]:focus,
		input[type="email"]:focus,
		input[type="tel"]:focus,
		select:focus,
		textarea:focus {
			background: rgba(254, 112, 67, 0.1);
			border-color: #fe7043;
			box-shadow: 0 0 0 1px #fe7043;
		}

	select option {
		color: #fff3ea;
		background: #1c0d12;
	}

	/* Cream dropdown arrow to match the new text color */
	select {
		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='%23FFE8B4' /%3E%3C/svg%3E");
	}

	input[type="checkbox"] + label,
	input[type="radio"] + label {
		color: #fff3ea;
	}

		input[type="checkbox"] + label:before,
		input[type="radio"] + label:before {
			border-color: rgba(255, 243, 234, 0.5);
		}

		input[type="checkbox"]:checked + label:before,
		input[type="radio"]:checked + label:before {
			background: #fe7043 !important;
			border-color: #fe7043 !important;
			color: #2a0d10;
		}

		input[type="checkbox"]:focus + label:before,
		input[type="radio"]:focus + label:before {
			background: rgba(254, 112, 67, 0.1);
			border-color: #fe7043;
			box-shadow: 0 0 0 1px #fe7043;
		}

/* --- Tables (Upcoming Shows) --- */

	table tbody tr {
		border-color: rgba(255, 243, 234, 0.35);
	}

		table tbody tr:nth-child(2n + 1) {
			background-color: rgba(255, 243, 234, 0.06);
		}

	table th {
		color: #fff3ea;
	}

	table thead {
		border-bottom-color: #fe7043;
	}

	table tfoot {
		border-top-color: rgba(255, 243, 234, 0.35);
	}

/* --- Text selection --- */

	::-moz-selection {
		background-color: #fe7043;
		color: #2a0d10;
	}

	::selection {
		background-color: #fe7043;
		color: #2a0d10;
	}

/* ============================================================
   2. Header logo: large, prominent brand mark
   ============================================================ */

	/* Deep-plum disc with a bright cream ring and a soft cream halo so the
	   medallion lifts cleanly off the dark plum/crimson page gradient instead
	   of melting into it. The ring is opaque cream (not the old 70% tint) and
	   the layered box-shadows are: a crisp cream edge line, a soft cream glow,
	   and the existing depth shadow. */
	#header .logo {
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		justify-content: center;
		width: 13rem;
		height: 13rem;
		line-height: 1;
		border: solid 3px #fff3ea;
		border-radius: 50%;
		background-color: #2a1016;
		overflow: hidden;
		box-shadow:
			0 0 0 1px rgba(255, 243, 234, 0.45),
			0 0 28px 6px rgba(255, 243, 234, 0.30),
			0 10px 28px rgba(0, 0, 0, 0.45);
	}

		#header .logo img {
			display: block;
			width: auto;
			height: 11.5rem;
		}

	@media screen and (max-width: 980px) {
		#header .logo {
			width: 11rem;
			height: 11rem;
		}
			#header .logo img {
				height: 9.75rem;
			}
	}

	@media screen and (max-width: 736px) {
		#header .logo {
			width: 11.5rem;
			height: 11.5rem;
		}
			#header .logo img {
				height: 10.25rem;
			}
	}

	@media screen and (max-width: 480px) {
		#header .logo {
			width: 11.5rem;
			height: 11.5rem;
		}
			#header .logo img {
				height: 10.25rem;
			}
	}

/* ============================================================
   3. Custom Designs: responsive gallery grid
   ============================================================ */

	#designs .gallery-hint {
		display: inline-block;
		margin: 0.5rem 0 0 0;
		font-size: 0.9rem;
		font-style: italic;
		letter-spacing: 0.05rem;
		color: #fff3ea;
		opacity: 0.8;
	}

		#designs .gallery-hint .fa-expand-arrows-alt {
			margin-right: 0.4rem;
		}

	#designs .gallery {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 1rem;
		margin: 1.5rem 0 0 0;
	}

		#designs .gallery a {
			position: relative;
			display: block;
			border-bottom: none;
			cursor: zoom-in;
		}

		/* Persistent expand badge so the click/tap affordance is visible
		   even on touch devices, where the :hover lift never fires. */
		#designs .gallery a::after {
			content: "\f31e";
			font-family: "Font Awesome 5 Free";
			font-weight: 900;
			position: absolute;
			top: 0.6rem;
			right: 0.6rem;
			width: 1.9rem;
			height: 1.9rem;
			line-height: 1.9rem;
			text-align: center;
			font-size: 0.9rem;
			color: #fff3ea;
			background-color: rgba(28, 13, 18, 0.72);
			border-radius: 50%;
			opacity: 0.85;
			pointer-events: none;
			-webkit-transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
			transition: opacity 0.2s ease, transform 0.2s ease;
		}

		#designs .gallery a:hover::after {
			opacity: 1;
			-webkit-transform: scale(1.1);
			transform: scale(1.1);
		}

		#designs .gallery img {
			display: block;
			width: 100%;
			height: 210px;
			object-fit: contain;
			background-color: rgba(255, 243, 234, 0.08);
			border-radius: 6px;
			padding: 0.5rem;
			box-sizing: border-box;
			-webkit-transition: -webkit-transform 0.2s ease, box-shadow 0.2s ease;
			transition: transform 0.2s ease, box-shadow 0.2s ease;
		}

		#designs .gallery a:hover img {
			-webkit-transform: translateY(-3px);
			transform: translateY(-3px);
			box-shadow: 0 8px 20px rgba(28, 13, 18, 0.5);
		}

	@media screen and (max-width: 480px) {
		#designs .gallery {
			grid-template-columns: repeat(2, 1fr);
			gap: 0.75rem;
		}

			#designs .gallery img {
				height: 160px;
			}
	}

/* ============================================================
   3. Responsive nav — stack earlier so two-word labels fit
   ------------------------------------------------------------
   The template only stacks the menu below 480px; between 480px
   and 736px the horizontal pill is too narrow for labels like
   "Upcoming Shows", so the second word wrapped and overflowed
   the fixed-height links. Apply the stacked layout up to 736px.
   ============================================================ */

	@media screen and (max-width: 736px) {

		#header nav ul {
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			min-width: 12rem;
			max-width: 100%;
		}

			#header nav ul li,
			#header nav.use-middle ul li.is-middle {
				border-left: 0;
				border-top: solid 1px #fff3ea;
			}

				#header nav ul li:first-child {
					border-top: 0;
				}

				#header nav ul li a {
					height: 3rem;
					line-height: 3rem;
					min-width: 0;
					width: 100%;
				}

		#header nav.use-middle:after {
			display: none;
		}

	}

/* ============================================================
   4. About Me & Upcoming Shows — smaller, centred lead image
   ------------------------------------------------------------
   The template renders ".image.main" full-bleed across the
   article. For these two sections a smaller, centred image
   reads better alongside the text. Cap the width and centre it.
   ============================================================ */

	#about .image.main,
	#shows .image.main {
		max-width: 24rem;
		margin-left: auto;
		margin-right: auto;
	}

	/* Shows now leads with the events table, so the photo is a smaller
	   supporting flourish that sits beneath it. */
	#shows .image.main {
		max-width: 15rem;
		margin-top: 2rem;
		opacity: 0.92;
	}

/* ============================================================
   Upcoming Shows — make the events table the star of the section
   ------------------------------------------------------------
   Wrap the table in an accented card and enlarge the type so the
   next dates read as the most important thing on the page.
   ============================================================ */

	#events-table-wrapper {
		border: 1px solid rgba(254, 112, 67, 0.45);
		border-radius: 0.5rem;
		background-color: rgba(254, 112, 67, 0.07);
		padding: 0.5rem 1.25rem;
		box-shadow: 0 0.5rem 1.5rem rgba(28, 13, 18, 0.35);
	}

	#shows table th {
		color: #ffa230;
		font-size: 1.05rem;
		letter-spacing: 0.04rem;
	}

	#shows table td {
		font-size: 1.1rem;
		padding-top: 0.85rem;
		padding-bottom: 0.85rem;
	}

	/* Lead with the event name. */
	#shows table td:first-child {
		font-weight: 600;
		color: #fff3ea;
	}

/* ============================================================
   Contact form — Turnstile widget + status message
   ============================================================ */

	#contact-form .cf-turnstile {
		margin: 0 0 1.5rem 0;
	}

	#contact-status {
		margin: 1rem 0 0 0;
		min-height: 1.5em;
	}

		#contact-status.status-success {
			color: #fff3ea;
			font-weight: bold;
		}

		#contact-status.status-error {
			color: #fe7043;
			font-weight: bold;
		}

/* ============================================================
   Contact success modal
   ------------------------------------------------------------
   Shown by contact.js after a message is sent. A fixed,
   flex-centred overlay above everything (articles sit inside
   #main); a dimmed plum backdrop with the same dark-plum card
   and Close affordance the template uses for articles.
   ============================================================ */

	.contact-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		justify-content: center;
		padding: 2rem;
		z-index: 10000;
		background-color: rgba(28, 13, 18, 0.65);
		-webkit-backdrop-filter: blur(2px);
		backdrop-filter: blur(2px);
		opacity: 0;
		-webkit-transition: opacity 0.325s ease-in-out;
		transition: opacity 0.325s ease-in-out;
	}

	.contact-modal[hidden] {
		display: none;
	}

	.contact-modal.is-visible {
		opacity: 1;
	}

		.contact-modal-card {
			position: relative;
			width: 30rem;
			max-width: 100%;
			padding: 3.5rem 2.5rem 2rem 2.5rem;
			text-align: center;
			background-color: rgba(28, 13, 18, 0.95);
			border: solid 1px rgba(255, 243, 234, 0.5);
			border-radius: 4px;
			box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
			-webkit-transform: translateY(0.5rem);
			-ms-transform: translateY(0.5rem);
			transform: translateY(0.5rem);
			-webkit-transition: -webkit-transform 0.325s ease-in-out;
			transition: transform 0.325s ease-in-out;
			outline: 0;
		}

		.contact-modal.is-visible .contact-modal-card {
			-webkit-transform: translateY(0);
			-ms-transform: translateY(0);
			transform: translateY(0);
		}

			.contact-modal-card .contact-modal-icon {
				width: 4rem;
				height: 4rem;
				margin: 0 auto 1.25rem auto;
				line-height: 4rem;
				font-size: 2rem;
				color: #2a0d10;
				background-color: #fe7043;
				border-radius: 50%;
			}

			.contact-modal-card h2 {
				margin-bottom: 0.75rem;
			}

			.contact-modal-card p {
				margin-bottom: 0;
			}

			/* Reuse the template's article close button (top-right X). */
			.contact-modal-card .close {
				display: block;
				position: absolute;
				top: 0;
				right: 0;
				width: 4rem;
				height: 4rem;
				cursor: pointer;
				text-indent: 4rem;
				overflow: hidden;
				white-space: nowrap;
			}

				.contact-modal-card .close:before {
					content: '';
					display: block;
					position: absolute;
					top: 0.75rem;
					left: 0.75rem;
					width: 2.5rem;
					height: 2.5rem;
					border-radius: 100%;
					background-position: center;
					background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='20px' height='20px' viewBox='0 0 20 20' zoomAndPan='disable'%3E%3Cstyle%3Eline %7B stroke: %23ffffff%3B stroke-width: 1%3B %7D%3C/style%3E%3Cline x1='2' y1='2' x2='18' y2='18' /%3E%3Cline x1='18' y1='2' x2='2' y2='18' /%3E%3C/svg%3E");
					background-size: 20px 20px;
					background-repeat: no-repeat;
					-webkit-transition: background-color 0.2s ease-in-out;
					transition: background-color 0.2s ease-in-out;
				}

				.contact-modal-card .close:hover:before {
					background-color: rgba(255, 255, 255, 0.075);
				}

				.contact-modal-card .close:active:before {
					background-color: rgba(255, 255, 255, 0.175);
				}

	@media (prefers-reduced-motion: reduce) {
		.contact-modal,
		.contact-modal-card {
			-webkit-transition: none;
			transition: none;
		}
	}

/* ============================================================
   Facebook feed — Page Plugin on the landing/header view
   ------------------------------------------------------------
   The Page Plugin renders a fixed-size white iframe. Wrap it in
   a branded card (cream ring + dark-plum backing) that echoes
   the nav pill and logo medallion so it sits on the gradient
   intentionally rather than floating. Sits below the nav and is
   hidden along with #header whenever an article opens.
   ============================================================ */

	.fb-feed {
		margin: 2rem auto 0;
		max-width: 500px;   /* Page Plugin caps the iframe at 500px wide */
		width: 100%;
		text-align: center;
	}

		/* Suppress the template's connector line (#header > *:before) above
		   the feed -- it should read as its own card, not chained to the nav. */
		.fb-feed:before {
			display: none !important;
		}

		.fb-feed h2 {
			color: #fff3ea;
			font-size: 2rem;
			margin: 0 0 0.75rem 0;
		}

		/* Cream-ringed plum card around the iframe. */
		.fb-feed .fb-page {
			display: inline-block;
			padding: 0.5rem;
			background-color: rgba(28, 13, 18, 0.85);
			border: solid 1px #fff3ea;
			border-radius: 6px;
			max-width: 100%;
			overflow: hidden;
		}

		/* The injected iframe (and its <span> wrapper) — keep within the card. */
		.fb-feed .fb-page span,
		.fb-feed .fb-page iframe {
			max-width: 100%;
		}

		/* Fallback link shown when the SDK is blocked or still loading. */
		.fb-feed .fb-page blockquote {
			margin: 0;
			padding: 1rem;
		}

	@media screen and (max-width: 736px) {
		.fb-feed {
			margin-top: 1.5rem;
			max-width: 100%;
		}
	}

/* ============================================================
   5. Microanimations — playful, handmade motion
   ------------------------------------------------------------
   All pure CSS. Two triggers do the heavy lifting:
     - `body.is-preload` is present at load and removed ~100ms
       after window.load (main.js). main.css suppresses every
       animation while it's set, so any `animation:` declared
       here fires once, cleanly, as an entrance when preload
       lifts (e.g. the logo pop).
     - main.js adds `.active` to an <article> when its section
       opens, so rules scoped under `#main article.active …`
       replay their entrance each time a section is shown
       (heading underline, content + gallery cascades).
   Everything below animates only transform / opacity / box-
   shadow to stay off the layout path. A single reduced-motion
   block at the very end disables all of it.
   ============================================================ */

	@keyframes tcg-logo-pop {
		0%   { opacity: 0; transform: scale(0.85); }
		60%  { opacity: 1; transform: scale(1.04); }
		100% { opacity: 1; transform: scale(1); }
	}

	@keyframes tcg-logo-float {
		0%, 100% { transform: translateY(0); }
		50%      { transform: translateY(-4px); }
	}

	/* One full 3D turn of the medallion on hover / tap (JS toggles the
	   .tcg-spin class on the <img>; see logo-spin.js). The axis and
	   direction come from where the pointer poked it: logo-spin.js writes
	   the axis vector (--tcg-ax, --tcg-ay) and signed angle (--tcg-deg)
	   inline before the spin runs. Defaults below reproduce the original
	   vertical-axis turn (rotate3d(0,1,0,360deg) === rotateY(360deg)) for
	   any spin triggered before JS sets them. The perspective lives in the
	   transform so the depth effect is self-contained to this animation. */
	#header .logo img.tcg-spin {
		--tcg-ax: 0;
		--tcg-ay: 1;
		--tcg-deg: 360deg;
	}

	@keyframes tcg-logo-spin {
		from { transform: perspective(600px) rotate3d(var(--tcg-ax), var(--tcg-ay), 0, 0deg); }
		to   { transform: perspective(600px) rotate3d(var(--tcg-ax), var(--tcg-ay), 0, var(--tcg-deg)); }
	}

	/* Slow brighten/dim of the cream glow layer in the logo's
	   layered shadow (the 28px 6px ring); other two layers held. */
	@keyframes tcg-halo-pulse {
		0%, 100% {
			box-shadow:
				0 0 0 1px rgba(255, 243, 234, 0.45),
				0 0 28px 6px rgba(255, 243, 234, 0.30),
				0 10px 28px rgba(0, 0, 0, 0.45);
		}
		50% {
			box-shadow:
				0 0 0 1px rgba(255, 243, 234, 0.50),
				0 0 36px 9px rgba(255, 243, 234, 0.45),
				0 10px 28px rgba(0, 0, 0, 0.45);
		}
	}

	@keyframes tcg-thumb-in {
		0%   { opacity: 0; transform: translateY(12px) scale(0.97); }
		100% { opacity: 1; transform: none; }
	}

	@keyframes tcg-content-in {
		0%   { opacity: 0; transform: translateY(10px); }
		100% { opacity: 1; transform: none; }
	}

	@keyframes tcg-draw-line {
		0%   { transform: scaleX(0); }
		100% { transform: scaleX(1); }
	}

	/* Subtle, slow "breathing" of the whole background. Scales up
	   only (1.0 -> 1.04) so the fixed full-viewport layer never
	   exposes its edges. Composes over #bg:after's zoom-on-open. */
	@keyframes tcg-bg-drift {
		0%, 100% { transform: scale(1.0); }
		50%      { transform: scale(1.04); }
	}

	@keyframes tcg-badge-pop {
		0%   { transform: scale(1); }
		50%  { transform: scale(1.28); }
		100% { transform: scale(1.1); }
	}

	@keyframes tcg-check-pop {
		0%   { opacity: 0; transform: scale(0); }
		60%  { opacity: 1; transform: scale(1.25); }
		100% { opacity: 1; transform: scale(1); }
	}

/* --- Logo: pop in, breathe, pulsing halo, hover/tap 3D spin --- */

	#header .logo {
		position: relative;
		/* The logo is grabbable (logo-spin.js): claim touch gestures so a
		   drag spins it instead of scrolling the page. */
		touch-action: none;
		/* logo-pop runs once on load; halo-pulse loops, delayed so it
		   begins after the pop settles. The hover/tap spin lives on the
		   inner <img> so it composes with the float untouched. */
		-webkit-animation: tcg-logo-pop 0.7s ease-out both, tcg-halo-pulse 5s ease-in-out 0.7s infinite;
		animation: tcg-logo-pop 0.7s ease-out both, tcg-halo-pulse 5s ease-in-out 0.7s infinite;
	}

		#header .logo img {
			/* Keep a drag spinning the medallion rather than triggering the
			   browser's native image-drag or a text selection. */
			-webkit-user-drag: none;
			-webkit-user-select: none;
			user-select: none;
			-webkit-animation: tcg-logo-float 5s ease-in-out 0.7s infinite;
			animation: tcg-logo-float 5s ease-in-out 0.7s infinite;
		}

		/* Hover / tap spin. Overrides the ambient float for its run;
		   logo-spin.js clears the class on animationend so the float
		   resumes and the spin can replay on the next hover/tap. The
		   second selector outranks `html.tcg-intro-done #header .logo
		   img`, which re-declares the float after the intro lands. */
		#header .logo img.tcg-spin,
		html.tcg-intro-done #header .logo img.tcg-spin {
			-webkit-animation: tcg-logo-spin 0.8s ease-in-out;
			animation: tcg-logo-spin 0.8s ease-in-out;
		}

/* --- Nav: coral underline wipe-in + slight lift on hover --- */

	#header nav ul li a {
		position: relative;
		-webkit-transition: background-color 0.2s ease, -webkit-transform 0.2s ease;
		transition: background-color 0.2s ease, transform 0.2s ease;
	}

		#header nav ul li a::after {
			content: '';
			position: absolute;
			left: 1.5rem;
			right: 1.5rem;
			bottom: 0.5rem;
			height: 2px;
			background-color: #fe7043;
			-webkit-transform: scaleX(0);
			transform: scaleX(0);
			-webkit-transform-origin: left center;
			transform-origin: left center;
			-webkit-transition: -webkit-transform 0.25s ease;
			transition: transform 0.25s ease;
		}

		#header nav ul li a:hover {
			-webkit-transform: translateY(-1px);
			transform: translateY(-1px);
		}

			#header nav ul li a:hover::after {
				-webkit-transform: scaleX(1);
				transform: scaleX(1);
			}

	/* Stacked mobile nav: span the underline edge-to-edge. */
	@media screen and (max-width: 736px) {
		#header nav ul li a::after {
			left: 1rem;
			right: 1rem;
		}
	}

/* --- Buttons: press squish --- */

	input[type="submit"],
	input[type="reset"],
	input[type="button"],
	button,
	.button {
		-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, -webkit-transform 0.12s ease;
		transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, transform 0.12s ease;
	}

		input[type="submit"]:active,
		input[type="reset"]:active,
		input[type="button"]:active,
		button:active,
		.button:active {
			-webkit-transform: scale(0.97);
			transform: scale(0.97);
		}

/* --- Section content: cascade in when the article opens --- */

	#main article.active > * {
		-webkit-animation: tcg-content-in 0.5s ease-out both;
		animation: tcg-content-in 0.5s ease-out both;
	}

		#main article.active > *:nth-child(1) { -webkit-animation-delay: 0.05s; animation-delay: 0.05s; }
		#main article.active > *:nth-child(2) { -webkit-animation-delay: 0.11s; animation-delay: 0.11s; }
		#main article.active > *:nth-child(3) { -webkit-animation-delay: 0.17s; animation-delay: 0.17s; }
		#main article.active > *:nth-child(4) { -webkit-animation-delay: 0.23s; animation-delay: 0.23s; }
		#main article.active > *:nth-child(5) { -webkit-animation-delay: 0.29s; animation-delay: 0.29s; }
		#main article.active > *:nth-child(6) { -webkit-animation-delay: 0.35s; animation-delay: 0.35s; }
		#main article.active > *:nth-child(n+7) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }

	/* The close button is appended to every article by main.js as the
	   last child; keep it out of the cascade so it never starts hidden. */
	#main article.active > .close {
		-webkit-animation: none;
		animation: none;
	}

/* --- Section headings: draw the coral underline in --- */

	#main article.active h2.major {
		position: relative;
		border-bottom-color: transparent;
	}

		#main article.active h2.major::after {
			content: '';
			position: absolute;
			left: 0;
			bottom: -1px;
			width: 100%;
			height: 2px;
			background-image: -webkit-linear-gradient(left, #ffa230, #fe7043, #fd1067);
			background-image: linear-gradient(90deg, #ffa230, #fe7043, #fd1067);
			-webkit-transform: scaleX(0);
			transform: scaleX(0);
			-webkit-transform-origin: left center;
			transform-origin: left center;
			-webkit-animation: tcg-draw-line 0.6s ease-out 0.25s both;
			animation: tcg-draw-line 0.6s ease-out 0.25s both;
		}

/* --- Gallery: staggered thumbnail reveal + bouncier badge --- */

	#main article.active .gallery a {
		-webkit-animation: tcg-thumb-in 0.5s ease-out both;
		animation: tcg-thumb-in 0.5s ease-out both;
	}

		/* Repeating diagonal wave across the grid (5-step buckets). */
		#main article.active .gallery a:nth-child(5n+1) { -webkit-animation-delay: 0.10s; animation-delay: 0.10s; }
		#main article.active .gallery a:nth-child(5n+2) { -webkit-animation-delay: 0.15s; animation-delay: 0.15s; }
		#main article.active .gallery a:nth-child(5n+3) { -webkit-animation-delay: 0.20s; animation-delay: 0.20s; }
		#main article.active .gallery a:nth-child(5n+4) { -webkit-animation-delay: 0.25s; animation-delay: 0.25s; }
		#main article.active .gallery a:nth-child(5n+5) { -webkit-animation-delay: 0.30s; animation-delay: 0.30s; }

	#designs .gallery a:hover::after {
		-webkit-animation: tcg-badge-pop 0.35s ease-out forwards;
		animation: tcg-badge-pop 0.35s ease-out forwards;
	}

/* --- Ambient: slow drifting background --- */

	#bg {
		-webkit-animation: tcg-bg-drift 34s ease-in-out infinite;
		animation: tcg-bg-drift 34s ease-in-out infinite;
	}

/* --- Form fields: subtle scale + glow on focus --- */

	input[type="text"],
	input[type="password"],
	input[type="email"],
	input[type="tel"],
	select,
	textarea {
		-webkit-transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease;
		transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
	}

		input[type="text"]:focus,
		input[type="password"]:focus,
		input[type="email"]:focus,
		input[type="tel"]:focus,
		select:focus,
		textarea:focus {
			-webkit-transform: scale(1.01);
			transform: scale(1.01);
		}

/* --- Success modal: spring the card in, bounce the checkmark --- */

	/* Override the linear translate from section 'Contact success modal'
	   with a springy translate + scale. */
	.contact-modal-card {
		-webkit-transform: translateY(0.5rem) scale(0.96);
		-ms-transform: translateY(0.5rem) scale(0.96);
		transform: translateY(0.5rem) scale(0.96);
		-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
		transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
	}

	.contact-modal.is-visible .contact-modal-card {
		-webkit-transform: translateY(0) scale(1);
		-ms-transform: translateY(0) scale(1);
		transform: translateY(0) scale(1);
	}

		.contact-modal.is-visible .contact-modal-icon {
			-webkit-animation: tcg-check-pop 0.5s ease-out 0.2s both;
			animation: tcg-check-pop 0.5s ease-out 0.2s both;
		}

/* ============================================================
   6. Intro sequence — big centered logo flies to its header spot
   ------------------------------------------------------------
   First visit of a browser-tab session only. The inline gate in
   index.html's <head> (sessionStorage + prefers-reduced-motion +
   no article hash) adds `tcg-intro-pending` to <html> before
   paint; assets/js/intro.js then FLIP-animates the real logo from
   big-and-centered down to its resting position and swaps to
   `tcg-intro-done`. When the gate never fires, none of this
   applies and the default load animations (section 5) run
   unchanged — so this needs no reduced-motion override.
   ============================================================ */

	/* Before paint: hold the logo and the rest of the header offstage so
	   nothing flashes in its resting place. opacity-only, so layout (and
	   therefore the resting position intro.js measures) stays truthful. */
	html.tcg-intro-pending #header .logo {
		opacity: 0;
		z-index: 10;
		/* Suppress the default pop + ambient loops until the hand-off. */
		-webkit-animation: none !important;
		animation: none !important;
	}

		html.tcg-intro-pending #header .logo img {
			-webkit-animation: none !important;
			animation: none !important;
		}

	html.tcg-intro-pending #header .content,
	html.tcg-intro-pending #header nav,
	html.tcg-intro-pending #header .fb-feed {
		opacity: 0;
	}

	/* Hide the connector stubs while the lone logo is centered. */
	html.tcg-intro-pending #header > *:before {
		display: none !important;
	}

	/* Hand-off: resume the ambient loops (no entrance pop — the fly-in was
	   the entrance) and fade/rise the header content in beneath the logo. */
	html.tcg-intro-done #header .logo {
		-webkit-animation: tcg-halo-pulse 5s ease-in-out infinite;
		animation: tcg-halo-pulse 5s ease-in-out infinite;
	}

		html.tcg-intro-done #header .logo img {
			-webkit-animation: tcg-logo-float 5s ease-in-out infinite;
			animation: tcg-logo-float 5s ease-in-out infinite;
		}

	html.tcg-intro-done #header .content,
	html.tcg-intro-done #header nav,
	html.tcg-intro-done #header .fb-feed {
		-webkit-animation: tcg-content-in 0.6s ease-out both;
		animation: tcg-content-in 0.6s ease-out both;
	}

		html.tcg-intro-done #header nav {
			-webkit-animation-delay: 0.12s;
			animation-delay: 0.12s;
		}

		html.tcg-intro-done #header .fb-feed {
			-webkit-animation-delay: 0.2s;
			animation-delay: 0.2s;
		}

/* ============================================================
   Reduced motion — disable every microanimation above.
   This block is intentionally last so it wins the cascade over
   all the rules in section 5 (and the earlier modal rules).
   ============================================================ */

	@media (prefers-reduced-motion: reduce) {

		#header .logo,
		#header .logo img,
		#header .logo:hover,
		#header nav ul li a,
		#header nav ul li a::after,
		#main article.active > *,
		#main article.active h2.major::after,
		#main article.active .gallery a,
		#designs .gallery a:hover::after,
		#bg,
		.contact-modal-card,
		.contact-modal.is-visible .contact-modal-card,
		.contact-modal.is-visible .contact-modal-icon,
		input:focus,
		select:focus,
		textarea:focus {
			-webkit-animation: none !important;
			animation: none !important;
			-webkit-transition: none !important;
			transition: none !important;
			-webkit-transform: none !important;
			-ms-transform: none !important;
			transform: none !important;
		}

		/* Keep the static states legible without motion: full-width
		   heading underline, restored solid heading border, fully
		   visible nav underline suppressed (it only shows on hover). */
		#main article.active h2.major {
			border-bottom-color: #fe7043;
			border-image: linear-gradient(90deg, #ffa230, #fe7043, #fd1067) 1;
		}

		#main article.active h2.major::after,
		#header nav ul li a::after {
			display: none;
		}

	}