split up css style files

styles/sections/work.css

@@ -0,0 +1,60 @@
+/* Work / career sections.
+   DOM (see scripts/sections/work.js):
+   .section-header > h1 + p.section-desc (role) + p.section-desc (dates, company) + .tags
+   .tasks-div > .task-div > span.task-title + span.task-content */
+
+/* Header: tighter than the project headers, since the tasks follow directly */
+
+.section-header:has(+ .tasks-div) {
+    margin-bottom: 40px;
+}
+
+.section-header:has(+ .tasks-div) .section-desc {
+    margin: 0;
+}
+
+.section-header:has(+ .tasks-div) .section-desc:first-of-type {
+    margin-top: 12px;
+    color: var(--text);
+    font-size: calc(var(--font-size) + 0.1rem);
+}
+
+.section-header:has(+ .tasks-div) .section-desc + .section-desc {
+    margin-top: 4px;
+    font-size: calc(var(--font-size) - 0.05rem);
+}
+
+.section-header:has(+ .tasks-div) .tags {
+    margin-top: 24px;
+}
+
+/* Tasks */
+
+.tasks-div {
+    display: flex;
+    flex-direction: column;
+    gap: 28px;
+    max-width: 75ch;
+    margin: 0 var(--margin-main-content) 100px;
+}
+
+.task-div {
+    padding-left: 20px;
+    border-left: 2px solid var(--border);
+    transition: border-color 0.18s;
+}
+
+@media (hover: hover) and (pointer: fine) {
+    .task-div:hover {
+        border-color: var(--text);
+    }
+}
+
+.task-title {
+    color: var(--text);
+    font-weight: 700;
+}
+
+.task-content {
+    color: var(--muted);
+}