clause agent mode "make it look like papermod"

sass/layouts/_content-layout.scss

@@ -0,0 +1,104 @@
+// PaperMod inspired layout styles
+.content-wrapper {
+	max-width: 1200px;
+	margin: 0 auto;
+	padding: 2rem 1.5rem;
+	display: grid;
+	grid-template-columns: 1fr 300px;
+	gap: 3rem;
+	align-items: start;
+	
+	@media (max-width: 1024px) {
+		grid-template-columns: 1fr;
+		gap: 2rem;
+		padding: 1.5rem 1rem;
+	}
+	
+	@media (max-width: 768px) {
+		padding: 1rem;
+	}
+}
+
+.site-main {
+	min-width: 0; // Prevent grid blowout
+	
+	// Full width on pages without sidebar
+	.no-sidebar & {
+		grid-column: 1 / -1;
+		max-width: 800px;
+		margin: 0 auto;
+	}
+	
+	// Single posts and pages
+	.single &,
+	.page & {
+		max-width: 800px;
+		
+		.no-sidebar & {
+			max-width: 900px;
+		}
+	}
+}
+
+// Archive and blog layouts
+.home,
+.archive,
+.search-results {
+	.content-wrapper {
+		grid-template-columns: 1fr;
+		max-width: 1000px;
+	}
+	
+	.site-main {
+		display: grid;
+		gap: 2rem;
+		
+		// Card grid for archive pages
+		&.card-grid {
+			grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+			gap: 2rem;
+			
+			@media (max-width: 768px) {
+				grid-template-columns: 1fr;
+				gap: 1.5rem;
+			}
+		}
+	}
+}
+
+// Site container
+#page {
+	display: flex;
+	flex-direction: column;
+	min-height: 100vh;
+	background: var(--color-bg-primary);
+}
+
+// Skip to content
+.skip-link {
+	&.screen-reader-text {
+		position: absolute !important;
+		clip-path: inset(50%);
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
+		
+		&:focus {
+			background: var(--color-text-primary);
+			color: var(--color-bg-primary);
+			clip-path: none;
+			display: block;
+			font-size: 0.875rem;
+			font-weight: $font__weight-bold;
+			height: auto;
+			left: 1rem;
+			line-height: normal;
+			padding: 1rem 1.5rem;
+			text-decoration: none;
+			top: 1rem;
+			width: auto;
+			z-index: 100000;
+			border-radius: 4px;
+		}
+	}
+}