fix: refine project section responsiveness

Author: glitchedmob

src/routes/+page.svelte

@@ -213,7 +213,9 @@
 			class="project-panel project-keyboard mt-[clamp(7rem,13vw,14rem)] grid grid-cols-[minmax(20rem,0.75fr)_minmax(25rem,1.25fr)] items-center gap-[clamp(3rem,7vw,8rem)] max-md:grid-cols-1"
 		>
 			<div class="project-console keyboard-console max-md:order-2">
-				<h3 class="project-title">Keyboard²</h3>
+				<h3 class="project-title project-title-keyboard" aria-label="Keyboard squared">
+					Keyboard<span class="keyboard-square" aria-hidden="true">2</span>
+				</h3>
 				<p class="mt-7 mb-4 text-[clamp(1.15rem,1.7vw,1.45rem)] leading-snug font-semibold">
 					A velocity-sensitive MIDI instrument disguised as a full-size beige computer keyboard.
 				</p>

src/routes/layout.css

@@ -46,12 +46,14 @@
 
 html {
 	scroll-behavior: smooth;
+	overflow-x: clip;
 	background: var(--void);
 }
 
 body {
 	margin: 0;
 	min-width: 320px;
+	overflow-x: clip;
 	background:
 		radial-gradient(circle at 13% 16%, rgba(110, 220, 242, 0.07) 0 1px, transparent 1.5px),
 		radial-gradient(circle at 84% 29%, rgba(125, 204, 189, 0.08) 0 1px, transparent 1.5px),
@@ -131,10 +133,28 @@ a {
 	font-weight: 800;
 	line-height: 0.9;
 	letter-spacing: -0.055em;
+	white-space: nowrap;
 }
 
 .project-title-long {
-	font-size: clamp(2.5rem, 5vw, 5rem);
+	font-size: clamp(2.1rem, 4vw, 4rem);
+}
+
+.project-title-keyboard {
+	font-size: clamp(2.5rem, 4.3vw, 4.5rem);
+}
+
+.keyboard-square {
+	display: inline-block;
+	margin-left: 0.22em;
+	color: var(--magenta);
+	font-family: var(--font-display);
+	font-size: 0.46em;
+	font-style: normal;
+	font-weight: 900;
+	line-height: 1;
+	transform: translateY(-0.95em);
+	-webkit-text-fill-color: var(--magenta);
 }
 
 .text-link,
@@ -315,21 +335,6 @@ a {
 	clip-path: polygon(0 3rem, 100% 0, 100% calc(100% - 3rem), 0 100%);
 }
 
-.projects-section::before {
-	position: absolute;
-	z-index: -2;
-	inset: 0 -2rem;
-	border-inline: 1px solid rgba(125, 204, 189, 0.12);
-	background: linear-gradient(
-		90deg,
-		rgba(110, 220, 242, 0.025),
-		transparent 38%,
-		transparent 62%,
-		rgba(197, 30, 138, 0.025)
-	);
-	content: '';
-}
-
 .project-panel {
 	position: relative;
 }

src/routes/projects/keyboard-keyboard/+page.svelte

@@ -10,9 +10,10 @@
 	class="mx-auto min-h-screen w-[calc(100%-2*var(--page-gutter))] max-w-[90rem] py-[clamp(4rem,10vw,10rem)]"
 >
 	<h1
+		aria-label="Keyboard squared"
 		class="font-display text-[clamp(3rem,8vw,7rem)] leading-[0.9] font-extrabold tracking-[-0.05em] uppercase italic"
 	>
-		Keyboard²
+		Keyboard<span class="keyboard-square" aria-hidden="true">2</span>
 	</h1>
 	<p class="mt-8 max-w-3xl text-[clamp(1.1rem,1.7vw,1.45rem)] leading-relaxed">
 		A velocity-sensitive MIDI instrument disguised as a full-size beige computer keyboard.