fix: redesign two-column layout with visible card container

- Main layout now sits in a visible card with background + border + rounded corners
- Sidebar has distinct darker background (was invisible, same as page)
- Divider upgraded to 2px ice-blue border (was 1px dark-on-dark, invisible)
- Wider page: 92vw / 1300px max (was 1100px)
- Content padded inside its column for clear separation
- Slightly more compact elements to fit above fold
- Footer gets subtle background treatment
- Backdrop blur for depth effect

Author: nanookclaw

style.css

@@ -94,29 +94,39 @@ body {
 }
 
 /* ============================================
-   Two-column layout
+   Two-column card layout
    ============================================ */
 main {
-  max-width: 1100px;
-  margin: 0 auto;
-  padding: 2.5rem 2rem 2rem;
+  width: 92vw;
+  max-width: 1300px;
+  margin: 2rem auto;
   display: grid;
   grid-template-columns: 300px 1fr;
   grid-template-rows: 1fr auto;
-  gap: 0 3rem;
-  min-height: 100vh;
+  gap: 0;
+  min-height: calc(100vh - 4rem);
+  background: rgba(15, 23, 42, 0.55);
+  border: 1px solid rgba(30, 41, 59, 0.8);
+  border-radius: 16px;
+  overflow: hidden;
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
 }
 
 /* ---- Sidebar (left column) ---- */
 .sidebar {
   grid-column: 1;
   grid-row: 1;
   position: sticky;
-  top: 2.5rem;
+  top: 0;
   align-self: start;
+  height: fit-content;
+  max-height: calc(100vh - 4rem);
+  overflow-y: auto;
   text-align: center;
-  border-right: 1px solid var(--dark-600);
-  padding-right: 2.5rem;
+  background: rgba(10, 15, 30, 0.7);
+  border-right: 2px solid rgba(56, 189, 248, 0.2);
+  padding: 2.5rem 1.75rem;
 }
 
 .avatar-container {
@@ -126,8 +136,8 @@ main {
 }
 
 .avatar {
-  width: 130px;
-  height: 130px;
+  width: 120px;
+  height: 120px;
   border-radius: 50%;
   border: 3px solid var(--ice-400);
   background: var(--dark-800);
@@ -153,7 +163,7 @@ main {
 }
 
 h1 {
-  font-size: 2.2rem;
+  font-size: 2rem;
   font-weight: 700;
   letter-spacing: -0.02em;
   color: var(--text-primary);
@@ -171,14 +181,14 @@ h1 {
 }
 
 .tagline {
-  font-size: 1.1rem;
+  font-size: 1.05rem;
   color: var(--ice-400);
   font-weight: 500;
   margin-top: 0.2rem;
 }
 
 .subtitle {
-  font-size: 0.9rem;
+  font-size: 0.85rem;
   color: var(--text-secondary);
   margin-top: 0.35rem;
   line-height: 1.4;
@@ -198,11 +208,11 @@ h1 {
 
 .tag {
   display: inline-block;
-  padding: 0.25rem 0.65rem;
+  padding: 0.2rem 0.6rem;
   background: rgba(14, 165, 233, 0.1);
   border: 1px solid rgba(14, 165, 233, 0.2);
   border-radius: 16px;
-  font-size: 0.75rem;
+  font-size: 0.72rem;
   color: var(--ice-300);
   transition: background 0.2s;
 }
@@ -216,17 +226,17 @@ h1 {
   margin-top: 1.5rem;
   display: flex;
   flex-direction: column;
-  gap: 0.4rem;
+  gap: 0.35rem;
 }
 
 .link-item {
   display: flex;
   align-items: center;
-  gap: 0.65rem;
-  padding: 0.55rem 0.75rem;
+  gap: 0.6rem;
+  padding: 0.5rem 0.7rem;
   background: rgba(15, 23, 42, 0.5);
   border: 1px solid var(--dark-700);
-  border-radius: 10px;
+  border-radius: 8px;
   text-decoration: none !important;
   transition: border-color 0.2s, background 0.2s;
 }
@@ -237,7 +247,7 @@ h1 {
 }
 
 .link-icon {
-  font-size: 1.15rem;
+  font-size: 1.1rem;
   flex-shrink: 0;
 }
 
@@ -251,42 +261,43 @@ h1 {
 .link-label {
   font-weight: 600;
   color: var(--text-primary);
-  font-size: 0.85rem;
+  font-size: 0.82rem;
 }
 
 .link-handle {
   color: var(--text-muted);
-  font-size: 0.75rem;
+  font-size: 0.72rem;
 }
 
 /* ---- Content (right column) ---- */
 .content {
   grid-column: 2;
   grid-row: 1;
   min-width: 0;
+  padding: 2.5rem 2.5rem 1.5rem;
 }
 
 section {
-  margin-bottom: 2.5rem;
+  margin-bottom: 2rem;
 }
 
 section:first-child {
   margin-top: 0;
 }
 
 h2 {
-  font-size: 1.2rem;
+  font-size: 1.15rem;
   font-weight: 600;
   color: var(--ice-300);
-  margin-bottom: 0.75rem;
-  padding-bottom: 0.4rem;
+  margin-bottom: 0.65rem;
+  padding-bottom: 0.35rem;
   border-bottom: 1px solid var(--dark-700);
 }
 
 p {
   color: var(--text-secondary);
-  margin-bottom: 0.6rem;
-  font-size: 0.95rem;
+  margin-bottom: 0.5rem;
+  font-size: 0.92rem;
 }
 
 a {
@@ -299,21 +310,21 @@ a:hover {
   color: var(--ice-300);
 }
 
-/* Trait cards — horizontal row */
+/* Trait cards — 2×2 grid */
 .trait-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: 0.75rem;
+  gap: 0.6rem;
 }
 
 .trait-card {
   display: flex;
   align-items: flex-start;
-  gap: 0.65rem;
-  background: rgba(15, 23, 42, 0.5);
+  gap: 0.6rem;
+  background: rgba(10, 15, 30, 0.5);
   border: 1px solid var(--dark-700);
-  border-radius: 10px;
-  padding: 0.85rem 1rem;
+  border-radius: 8px;
+  padding: 0.7rem 0.85rem;
   transition: border-color 0.2s;
 }
 
@@ -322,43 +333,43 @@ a:hover {
 }
 
 .trait-icon {
-  font-size: 1.3rem;
+  font-size: 1.2rem;
   flex-shrink: 0;
   margin-top: 0.1rem;
 }
 
 .trait-body h3 {
-  font-size: 0.9rem;
+  font-size: 0.85rem;
   font-weight: 600;
   color: var(--text-primary);
-  margin-bottom: 0.15rem;
+  margin-bottom: 0.1rem;
 }
 
 .trait-body p {
-  font-size: 0.82rem;
+  font-size: 0.78rem;
   color: var(--text-muted);
   margin: 0;
-  line-height: 1.4;
+  line-height: 1.35;
 }
 
 /* Projects — compact grid */
 .projects-intro {
-  margin-bottom: 1rem;
+  margin-bottom: 0.75rem;
 }
 
 .project-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: 0.5rem;
+  gap: 0.45rem;
 }
 
 .project {
   display: flex;
   flex-direction: column;
-  padding: 0.65rem 0.85rem;
-  background: rgba(15, 23, 42, 0.35);
+  padding: 0.55rem 0.75rem;
+  background: rgba(10, 15, 30, 0.35);
   border: 1px solid rgba(30, 41, 59, 0.6);
-  border-radius: 8px;
+  border-radius: 6px;
   transition: border-color 0.2s;
 }
 
@@ -369,33 +380,34 @@ a:hover {
 .project-name {
   font-weight: 600;
   color: var(--text-primary);
-  font-size: 0.88rem;
+  font-size: 0.84rem;
 }
 
 .project-desc {
   color: var(--text-muted);
-  font-size: 0.78rem;
-  line-height: 1.35;
+  font-size: 0.74rem;
+  line-height: 1.3;
 }
 
 /* Footer — spans full width */
 footer {
   grid-column: 1 / -1;
   text-align: center;
-  padding: 1.5rem 0 1rem;
+  padding: 1.25rem 1.5rem 1rem;
   border-top: 1px solid var(--dark-700);
+  background: rgba(10, 15, 30, 0.3);
 }
 
 .footer-text {
-  font-size: 0.82rem;
+  font-size: 0.8rem;
   color: var(--text-secondary);
 }
 
 .footer-sub {
-  font-size: 0.75rem;
+  font-size: 0.72rem;
   color: var(--text-muted);
   font-style: italic;
-  margin-top: 0.2rem;
+  margin-top: 0.15rem;
 }
 
 /* ============================================
@@ -404,16 +416,22 @@ footer {
 @media (max-width: 768px) {
   main {
     grid-template-columns: 1fr;
-    padding: 1.5rem 1rem 2rem;
-    gap: 2rem 0;
+    width: 95vw;
+    margin: 1rem auto;
+    min-height: auto;
+    border-radius: 12px;
   }
 
   .sidebar {
     position: static;
-    padding-bottom: 1rem;
-    padding-right: 0;
+    max-height: none;
+    padding: 2rem 1.5rem 1.5rem;
     border-right: none;
-    border-bottom: 1px solid var(--dark-700);
+    border-bottom: 2px solid rgba(56, 189, 248, 0.2);
+  }
+
+  .content {
+    padding: 1.5rem 1.25rem 1rem;
   }
 
   .connect {
@@ -425,7 +443,7 @@ footer {
 
   .link-item {
     flex: 0 1 auto;
-    padding: 0.45rem 0.65rem;
+    padding: 0.4rem 0.6rem;
   }
 
   .link-text {
@@ -439,7 +457,7 @@ footer {
   }
 
   h1 {
-    font-size: 2rem;
+    font-size: 1.8rem;
   }
 
   .avatar {