Bunch of behavioral fixes

style.css

@@ -16,7 +16,7 @@
 }
 
 /* ─── Base ───────────────────────────────────────────────────────────────────── */
-html { font-size: 13px; }
+html, body { height: 100%; margin: 0; }
 
 body {
   font-family: var(--font);
@@ -25,12 +25,10 @@ body {
   line-height: 1.54;
   background: var(--bg);
   color: var(--text);
-  padding: 32px 36px;
-  max-width: 1000px;
-  margin: 0 auto;
-  /* Don't let the page grow beyond one screen */
-  height: 100vh;
-  overflow: hidden;
+  padding: 28px 32px;
+  box-sizing: border-box;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 
 ul { list-style: none; }
@@ -39,9 +37,11 @@ a  { color: var(--accent); text-decoration: none; }
 /* ─── Front matter ───────────────────────────────────────────────────────────── */
 .front-matter {
   text-align: center;
-  padding-bottom: 16px;
-  margin-bottom: 16px;
+  padding-bottom: 14px;
+  margin-bottom: 14px;
   border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+  width: 100%;
 }
 
 .fm-name {
@@ -64,45 +64,30 @@ a  { color: var(--accent); text-decoration: none; }
   margin: 0 6px;
 }
 
-/* ─── Columns: flex column-wrap ──────────────────────────────────────────────── */
-/*
- * All cards and headings are direct children of .columns.
- * flex-flow: column wrap makes them stack vertically, and once they
- * exceed the container height they wrap into the next column —
- * exactly like text wrapping in a newspaper column.
- * Any card, at any level, can be the wrap point.
- *
- * max-height is the remaining viewport after front-matter.
- * The front-matter is roughly 80px tall with the padding above.
- * JS sets this precisely via --col-height, but the CSS default is close.
- */
+/* ─── Column layout ──────────────────────────────────────────────────────────── */
 .columns {
-  display: flex;
-  flex-flow: column wrap;
-  align-content: space-between;
-  max-height: calc(100vh - 130px);
-  gap: 0;
+  column-width: 22em;
+  column-gap: 2em;
+  column-rule: 1px solid var(--border);
+  column-fill: balance;
 }
 
-/* Every direct child is half the container width */
-.columns > * {
-  width: calc(50% - 20px);
+/* Prevent any card from being split across a column boundary */
+.sec-heading,
+.title-card,
+.project-card,
+.education-card,
+.interests,
+.favorite-software {
+  break-inside: avoid;
 }
 
-/* Dividing rule: pseudo-element positioned in the middle */
-.columns::before {
-  content: "";
-  position: absolute;
-  left: 50%;
-  top: 0;
-  bottom: 0;
-  width: 1px;
-  background: var(--border);
-  pointer-events: none;
+/* Keep each section heading attached to whatever follows it */
+.sec-heading {
+  break-after: avoid;
 }
-.columns { position: relative; }
 
-/* Section headings */
+/* ─── Section headings ───────────────────────────────────────────────────────── */
 .sec-heading {
   font-size: 0.7rem;
   font-weight: 800;
@@ -180,6 +165,14 @@ a  { color: var(--accent); text-decoration: none; }
   border-left-color: var(--accent);
 }
 
+.project-card.clickable { cursor: pointer; }
+.project-card.clickable:hover .project-name::after {
+  content: " ↗";
+  font-size: 0.7rem;
+  color: var(--accent);
+  opacity: 0.7;
+}
+
 .project-name { font-size: 0.83rem; }
 
 .project-summary ul { padding-left: 12px; margin-top: 2px; }
@@ -261,20 +254,50 @@ a  { color: var(--accent); text-decoration: none; }
 }
 .edu-extras li::before { content: "- "; }
 
-/* ─── Interests ──────────────────────────────────────────────────────────────── */
-.interest-card {
-  font-size: 0.82rem;
-  line-height: 1.54;
-  padding: 2px 0;
+/* ─── Interests — 2-column micro-card grid ───────────────────────────────────── */
+.interests {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 4px;
+}
+
+.interest-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  padding: 5px 8px;
+}
+.interest-title {
+  display: block;
+  font-weight: 700;
+  font-size: 0.78rem;
+  color: var(--text);
+}
+.interest-description {
+  display: block;
+  font-size: 0.73rem;
+  color: var(--muted);
+  line-height: 1.4;
+}
+
+/* ─── Favorite software — 4-column tag grid ─────────────────────────────────── */
+.favorite-software {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 4px;
+}
+
+.sw-item {
+  background: var(--tag-bg);
+  color: var(--tag-text);
+  font-size: 0.72rem;
+  padding: 3px 6px;
+  border-radius: 2px;
+  text-align: center;
 }
-.interest-title { font-weight: 700; }
-.interest-title::after { content: ": "; color: var(--muted); font-weight: normal; }
-.interest-description { color: var(--muted); }
 
 /* ─── Responsive ─────────────────────────────────────────────────────────────── */
-@media (max-width: 640px) {
-  body { height: auto; overflow: auto; padding: 20px 16px; }
-  .columns { flex-flow: column nowrap; max-height: none; }
-  .columns > * { width: 100%; }
-  .columns::before { display: none; }
+@media (max-width: 400px) {
+  html, body { height: auto; overflow: auto; }
+  .columns { column-width: auto; columns: 1; }
 }