/*
	The raised content card.

	Shared by publications.html and projects.html — any page built as
	`<section class="wrapper style2 invert color1">` inside `#wrapper`. Load AFTER
	main.css: the selector below is byte-identical to the one in main.css (which paints
	the panel flat #000000), so it wins on load order alone, not on specificity.

	#2E3337 is a neutral dark gray, picked to sit just above BOTH ends of the page
	gradient (#0D0F10 → #22262A) in lightness, so the panel reads as raised across its
	full width rather than inverting partway along. It holds white body text at 12.8:1
	and #47D3E5 links at 7.1:1 (both well past WCAG AA).

	The depth is four stacked pieces, not one blunt shadow:
	  1. a top-lit vertical gradient, so the panel looks lit from above;
	  2. a 1px inset highlight on the top edge — the lip of a raised surface;
	  3. a 1px inset shade on the bottom edge, closing the bevel;
	  4. three drop shadows at increasing blur, which is what reads as "floating"
	     rather than merely "outlined".
*/

#wrapper > .wrapper.style2.invert > .inner {
	background-color: #2E3337;
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, 0.13) 100%);
	border-radius: 0.75rem;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.2),
		inset 0 -1px 0 rgba(0, 0, 0, 0.3),
		0 2px 4px rgba(0, 0, 0, 0.2),
		0 10px 20px rgba(0, 0, 0, 0.26),
		0 28px 56px rgba(0, 0, 0, 0.3);
}