diff --git a/app/globals.css b/app/globals.css
index 2ecba92..2ab0034 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -13,6 +13,10 @@
 }
 
 html {
+  /* Preserve the desktop composition at the 1344px reference width.
+     Tailwind's rem-based type, spacing, and container widths then grow together.
+     Keep the user's default font size on smaller screens. */
+  font-size: max(100%, calc(100vw / 84));
   scroll-behavior: smooth;
   scroll-padding-top: 4rem;
 }
diff --git a/components/AsciiHero.tsx b/components/AsciiHero.tsx
index b1c14a9..89f1419 100644
--- a/components/AsciiHero.tsx
+++ b/components/AsciiHero.tsx
@@ -17,7 +17,7 @@ export default function AsciiHero() {
           src={gpkTriangleLogo}
           alt="Graphics Programming Knights logo"
           className="w-full h-full object-contain"
-          sizes="(min-width: 1280px) 512px, (min-width: 1024px) 45vw, (min-width: 640px) 384px, 288px"
+          sizes="(min-width: 1344px) 38vw, (min-width: 1280px) 512px, (min-width: 1024px) 45vw, (min-width: 640px) 384px, 288px"
           priority
         />
 
diff --git a/components/HeroSection.tsx b/components/HeroSection.tsx
index 508e08d..f1d429c 100644
--- a/components/HeroSection.tsx
+++ b/components/HeroSection.tsx
@@ -22,7 +22,7 @@ export default function HeroSection() {
             className="inline-flex shrink-0 items-center gap-2 rounded-full bg-accent px-6 py-3 text-lg font-medium text-text-primary transition-colors hover:bg-accent-light focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-accent-light"
           >
             Join Us
-            <FaDiscord size={28} />
+            <FaDiscord className="h-7 w-7" />
           </a>
 
           {/* Icons Row */}