.chad-case {
	--cs-orange: #ff6900;
	--cs-orange-lt: #ff8a1f;
	--cs-black: #0a0a0a;
	/* wider than the theme's narrow text column, centered */
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: min(1080px, calc(100vw - 32px));
	max-width: none !important;
	margin: 0 !important;
	padding: 8px 0 28px;
	box-sizing: border-box;
	text-align: center;
	color: #111;
}
.chad-case *, .chad-case *::before, .chad-case *::after { box-sizing: border-box; }

/* ---- Poster title: chiseled burnt orange with a 3D edge ---- */
.cs-title {
	margin: 0 0 30px;
	padding: 0 6px 6px 0;
	font-family: Impact, "Haettenschweiler", "Arial Narrow Bold", "Arial Black", sans-serif;
	font-weight: 900;
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	line-height: 1.02;
}
.cs-title span {
	display: block;
	color: #d24b00;
	background: linear-gradient(180deg, #f0640a 0%, #d24b00 42%, #a83a00 72%, #712600 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	/* dark outline (outside the letters only, so the orange stays full) so the title sits into the page instead of glaring against it */
	filter:
		drop-shadow(2px 0 0 #3d1600) drop-shadow(-2px 0 0 #3d1600)
		drop-shadow(0 2px 0 #3d1600) drop-shadow(0 -2px 0 #3d1600)
		drop-shadow(1px 1px 0 #4a1a00) drop-shadow(1px 1px 0 #4a1a00)
		drop-shadow(1px 1px 0 #3a1400) drop-shadow(1px 1px 0 #3a1400)
		drop-shadow(1px 1px 0 #2a0e00) drop-shadow(1px 1px 0 #2a0e00)
		drop-shadow(0 10px 8px rgba(0, 0, 0, 0.4));
}
.cs-title .cs-l1 { font-size: clamp(1.5rem, 6.2vw, 2.6rem); letter-spacing: 0.12em; }
.cs-title .cs-l2 { font-size: clamp(2rem, 8.6vw, 4.6rem); }

/* ---- Tab buttons ---- */
.cs-tabs { display: flex; flex-wrap: wrap; gap: 14px 16px; justify-content: center; margin: 0 0 30px; }
.cs-tab {
	display: inline-block;
	padding: 13px 22px 11px;
	background: var(--cs-black);
	color: var(--cs-orange-lt);
	border: 3px solid var(--cs-black);
	box-shadow: 5px 5px 0 var(--cs-orange);
	font-family: Impact, "Haettenschweiler", "Arial Narrow Bold", "Arial Black", sans-serif;
	font-size: 1.15rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.cs-tab:hover, .cs-tab:focus-visible {
	background: var(--cs-orange);
	color: #000;
	transform: translate(-3px, -3px);
	box-shadow: 8px 8px 0 var(--cs-black);
}

/* the theme forces its own font on paragraphs, so these two need !important */
.chad-case .cs-banner { font-family: Impact, "Haettenschweiler", "Arial Narrow Bold", "Arial Black", sans-serif !important; font-weight: 400 !important; }
.chad-case .cs-note { font-family: "Courier New", Courier, monospace !important; }

/* ---- Banner ---- */
.cs-banner {
	margin: 0 0 26px;
	padding: 20px 24px 18px;
	background: var(--cs-black);
	border-left: 12px solid var(--cs-orange);
	color: var(--cs-orange-lt);
	font-family: Impact, "Haettenschweiler", "Arial Narrow Bold", "Arial Black", sans-serif;
	font-style: italic;
	font-size: clamp(1.15rem, 3.6vw, 2rem);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: left;
	line-height: 1.15;
}

/* ---- Stat cards ---- */
.cs-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
	margin: 0 0 44px;
	padding: 0 8px 8px 0;
}
.cs-stat {
	padding: 22px 10px 18px;
	background: var(--cs-black);
	border: 3px solid var(--cs-black);
	box-shadow: 7px 7px 0 var(--cs-orange);
}
.cs-num {
	font-family: Impact, "Haettenschweiler", "Arial Narrow Bold", "Arial Black", sans-serif;
	font-size: clamp(2.8rem, 7.4vw, 5rem);
	line-height: 1;
	background: linear-gradient(180deg, #ffb45a 0%, #ff6900 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-variant-numeric: tabular-nums;
}
.cs-lab {
	margin-top: 10px;
	color: #fff;
	font-family: "Courier New", Courier, monospace;
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* ---- Sections ---- */
.cs-section { margin: 0 0 48px; }
.cs-h2 {
	display: inline-block;
	margin: 0 0 22px;
	padding: 0 4px 6px;
	border-bottom: 6px solid var(--cs-orange);
	font-family: Impact, "Haettenschweiler", "Arial Narrow Bold", "Arial Black", sans-serif;
	font-style: italic;
	font-size: clamp(1.7rem, 5vw, 2.6rem);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cs-black);
}
.cs-zoom {
	display: block;
	width: 100%;
	margin: 0 0 12px;
	padding: 0;
	background: #fff;
	border: 4px solid var(--cs-black);
	box-shadow: 9px 9px 0 var(--cs-orange);
	cursor: zoom-in;
	line-height: 0;
}
.cs-zoom img { display: block; width: 100%; height: auto; }
.cs-zoom:focus-visible { outline: 3px solid #ffd900; outline-offset: 4px; }
.cs-note { margin: 16px 0 0; color: #444; font-family: "Courier New", Courier, monospace; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; }

.cs-pdf {
	display: block;
	width: 100%;
	height: 760px;
	margin: 0 0 22px;
	background: #fff;
	border: 4px solid var(--cs-black);
	box-shadow: 9px 9px 0 var(--cs-orange);
}
.cs-actions { margin: 0; }
.cs-btn {
	display: inline-block;
	padding: 15px 26px 13px;
	background: var(--cs-orange);
	color: #000;
	border: 3px solid var(--cs-black);
	box-shadow: 5px 5px 0 var(--cs-black);
	font-family: Impact, "Haettenschweiler", "Arial Narrow Bold", "Arial Black", sans-serif;
	font-size: 1.1rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.cs-btn:hover, .cs-btn:focus-visible { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--cs-black); }

/* current page tab */
.cs-tab--current { background: var(--cs-orange); color: #000; box-shadow: 5px 5px 0 var(--cs-black); pointer-events: none; }

/* ---- Document (PDF) cards ---- */
.cs-docs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 28px 22px;
	padding: 0 8px 8px 0;
}
.cs-doc {
	position: relative;
	padding: 30px 16px 22px;
	background: var(--cs-black);
	border: 3px solid var(--cs-black);
	box-shadow: 7px 7px 0 var(--cs-orange);
	text-align: center;
}
.cs-doc::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 12px; background: var(--cs-orange); }
.cs-doc-k { color: #fff; font-family: "Courier New", Courier, monospace; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.16em; text-transform: uppercase; }
.cs-doc-n {
	margin: 8px 0 12px;
	font-family: Impact, "Haettenschweiler", "Arial Narrow Bold", "Arial Black", sans-serif;
	font-size: clamp(1.5rem, 4.4vw, 2rem);
	letter-spacing: 0.06em;
	line-height: 1.1;
	overflow-wrap: anywhere;
	background: linear-gradient(180deg, #ffb45a 0%, #ff6900 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.cs-doc-meta { margin-bottom: 18px; color: #bbb; font-family: "Courier New", Courier, monospace; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }
.cs-doc .cs-btn { padding: 12px 20px 10px; border-color: #fff; box-shadow: none; }
.cs-doc .cs-btn:hover, .cs-doc .cs-btn:focus-visible { background: #fff; transform: none; box-shadow: none; }

/* ---- Image gallery ---- */
.cs-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--cs-min, 240px), 1fr));
	gap: 26px 22px;
	padding: 0 8px 8px 0;
}
.cs-shot {
	display: block;
	width: 100%;
	aspect-ratio: var(--cs-ratio, 4 / 5);
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: #000;
	border: 4px solid var(--cs-black);
	box-shadow: 7px 7px 0 var(--cs-orange);
	cursor: zoom-in;
	line-height: 0;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cs-shot:hover, .cs-shot:focus-visible { transform: translate(-3px, -3px); box-shadow: 10px 10px 0 var(--cs-black); }
.cs-shot:focus-visible { outline: 3px solid #ffd900; outline-offset: 4px; }
.cs-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--cs-pos, top center); }
.cs-section > .cs-zoom { max-width: 760px; margin-left: auto; margin-right: auto; }

/* ---- Zoom viewer ---- */
.cs-arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	width: 46px;
	height: 60px;
	margin-top: -30px;
	padding: 0;
	border: 3px solid #fff;
	background: var(--cs-orange);
	color: #000;
	font-size: 20px;
	cursor: pointer;
	box-shadow: 0 0 0 3px var(--cs-black);
}
.cs-arrow[hidden] { display: none; }
.cs-prev { left: 10px; }
.cs-next { right: 10px; }
.cs-modal.cs-fit .cs-scroll { display: flex; align-items: center; justify-content: center; overflow: auto; background: #000; }
.cs-modal.cs-fit .cs-scroll img { max-width: 100%; max-height: calc(100vh - 40px); width: auto; height: auto; }
html.cs-lock { overflow: hidden; }
.cs-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 14px; }
.cs-modal[hidden] { display: none; }
.cs-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.94); }
.cs-scroll {
	position: relative;
	max-width: 100%;
	max-height: 100%;
	overflow: auto;
	background: #fff;
	border: 4px solid var(--cs-orange);
	-webkit-overflow-scrolling: touch;
}
.cs-scroll img { display: block; width: auto; max-width: none; height: auto; }
.cs-close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--cs-orange);
	color: #000;
	font-size: 28px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 0 0 3px var(--cs-black);
}

/* ---- Logo-color theme (red / white / blue), used on the Gallery page ---- */
.chad-case.cs-logo { --cs-orange: #2f57d8; }
.cs-logo .cs-title span {
	background: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	-webkit-text-fill-color: currentColor;
	-webkit-text-stroke: 7px #2f57d8;
	paint-order: stroke fill;
	stroke-linejoin: round;
	letter-spacing: 0.05em;
}
.cs-logo .cs-title .cs-l1 {
	font-size: clamp(2.1rem, 10.5vw, 4.9rem);
	color: #fff;
	filter:
		drop-shadow(1px 1px 0 #e21f26) drop-shadow(1px 1px 0 #e21f26)
		drop-shadow(1px 1px 0 #c4161c) drop-shadow(1px 1px 0 #c4161c)
		drop-shadow(1px 1px 0 #9b1015) drop-shadow(1px 1px 0 #9b1015)
		drop-shadow(0 8px 6px rgba(0, 0, 0, 0.35));
}
.cs-logo .cs-title .cs-l2 {
	font-size: clamp(2.4rem, 12.5vw, 6rem);
	color: #e21f26;
	filter:
		drop-shadow(1px 1px 0 #1c2f8f) drop-shadow(1px 1px 0 #1c2f8f)
		drop-shadow(1px 1px 0 #142270) drop-shadow(1px 1px 0 #142270)
		drop-shadow(1px 1px 0 #0d1650) drop-shadow(1px 1px 0 #0d1650)
		drop-shadow(0 8px 6px rgba(0, 0, 0, 0.35));
}
.cs-logo .cs-shot:hover, .cs-logo .cs-shot:focus-visible { box-shadow: 10px 10px 0 #e21f26; }
.cs-logo .cs-arrow, .cs-logo .cs-close { background: #e21f26; color: #fff; }

@media (max-width: 900px) {
	.cs-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.cs-gallery--dense { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; padding-right: 6px; }
	.cs-gallery--dense .cs-shot { border-width: 3px; box-shadow: 5px 5px 0 var(--cs-orange); }
}
@media (max-width: 700px) {
	.cs-pdf { display: none; }
	.cs-btn { display: block; }
	.cs-stat { padding: 18px 6px 14px; }
	.cs-tab { padding: 12px 16px 10px; font-size: 1.05rem; }
	.cs-banner { padding: 16px 16px 14px; border-left-width: 9px; }
}
@media (prefers-reduced-motion: reduce) {
	.cs-tab, .cs-btn { transition: none; }
}