landing and portfolio

css/portfolio.css

@@ -7,44 +7,132 @@
     text-decoration: underline;
 }
 
-/* — Project card link — */
+/* ========================================
+   PORTFOLIO GRID — 3-col card index
+   ======================================== */
 
-.project-card-link {
-    display: block;
-    text-decoration: none;
-    color: var(--white);
+.portfolio-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 2rem;
 }
 
-.project-card-inner {
+/* — Project card — */
+
+.project-card {
+    display: flex;
+    flex-direction: column;
+    background: var(--black);
+    border: 4px solid var(--black);
+    box-shadow: 8px 8px 0 var(--black);
+    color: var(--white);
+    text-decoration: none;
     transition: transform 0.1s, box-shadow 0.1s;
 }
 
-.project-card-link:hover .project-card-inner {
+.project-card:hover {
     transform: translate(-2px, -2px);
-    box-shadow: 10px 10px 0px var(--black);
+    box-shadow: 8px 8px 0 var(--accent);
 }
 
-.project-card-head {
-    display: flex;
-    justify-content: space-between;
-    align-items: baseline;
-    margin-bottom: 0.5rem;
+.project-card--wip {
+    opacity: 0.45;
+    pointer-events: none;
 }
 
-.project-card-year {
+/* — Thumbnail — */
+
+.project-card__thumb {
+    position: relative;
+    aspect-ratio: 4 / 3;
+    background: var(--grey-light);
+    overflow: hidden;
+}
+
+.project-card__thumb img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+
+.project-card__label {
+    position: absolute;
+    top: 0;
+    left: 0;
     font-family: var(--mono);
     font-size: 0.75rem;
-    color: var(--grey-text);
+    font-weight: 700;
+    color: var(--accent);
+    background: var(--black);
+    padding: 0.3rem 0.6rem;
+    z-index: 1;
+    letter-spacing: 0.04em;
 }
 
-.project-card-cta {
-    display: inline-block;
+/* — Body — */
+
+.project-card__body {
+    padding: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    border-top: 2px solid var(--grey-dark);
+}
+
+.project-card__title {
     font-family: var(--mono);
-    font-size: 0.8rem;
-    font-weight: 700;
+    font-size: 0.9rem;
+    font-weight: 800;
     text-transform: uppercase;
+    letter-spacing: 0.02em;
+    color: var(--white);
+    margin-bottom: 0.6rem;
+    line-height: 1.3;
+}
+
+.project-card__desc {
+    font-family: var(--sans);
+    font-size: 0.85rem;
+    font-weight: 400;
+    color: var(--grey-text);
+    line-height: 1.5;
+    flex: 1;
+}
+
+/* — Footer row — */
+
+.project-card__footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 1.25rem;
+}
+
+.project-card__year {
+    font-family: var(--mono);
+    font-size: 0.65rem;
+    color: var(--grey-text);
+    letter-spacing: 0.06em;
+}
+
+.project-card__arrow {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    border: 2px solid var(--accent);
+    font-family: var(--mono);
+    font-size: 1rem;
     color: var(--accent);
-    margin-top: 1.5rem;
+    flex-shrink: 0;
+    transition: background 0.1s, color 0.1s;
+}
+
+.project-card:hover .project-card__arrow {
+    background: var(--accent);
+    color: var(--black);
 }
 
 /* — Tags — */
@@ -53,7 +141,7 @@
     display: flex;
     gap: 0.5rem;
     flex-wrap: wrap;
-    margin-top: 1rem;
+    margin-top: 0.5rem;
 }
 
 .tag {
@@ -68,6 +156,76 @@
     color: var(--grey-text);
 }
 
+/* — Case study breadcrumb bar — */
+
+.cs-breadcrumb {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: var(--black);
+    border: 4px solid var(--black);
+    box-shadow: 8px 8px 0 var(--black);
+    padding: 0.75rem 1.25rem;
+    margin-bottom: 2rem;
+}
+
+.cs-breadcrumb-label {
+    font-family: var(--mono);
+    font-size: 0.75rem;
+    font-weight: 700;
+    color: var(--accent);
+    letter-spacing: 0.04em;
+}
+
+/* — Case study inline meta bar — */
+
+.cs-meta-bar {
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0 2rem;
+    padding: 0.75rem 1rem;
+    background: var(--grey-dark);
+    border-left: 6px solid var(--grey-text);
+    /*border-top: 4px solid var(--grey-text);*/
+    margin-top: 1.5rem;
+    max-width: clamp(380px, 55vw, 750px);
+    box-shadow: var(--shadow);
+}
+
+.cs-meta-bar li {
+    font-family: var(--mono);
+    font-size: 0.8rem;
+    font-weight: 400;
+    color: var(--grey-text);
+    line-height: 1.8;
+}
+
+/* — Case study back link — */
+
+.cs-back {
+    display: inline-block;
+    font-family: var(--mono);
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--accent);
+    text-decoration: none;
+    margin-bottom: 1.5rem;
+    transition: opacity 0.1s;
+}
+
+.cs-back:hover {
+    opacity: 0.7;
+}
+
+.cs-back--lg {
+    font-size: 0.85rem;
+    display: block;
+    margin-bottom: 2rem;
+}
+
 /* — Case study meta grid — */
 
 .cs-meta-grid {
@@ -165,6 +323,11 @@
 }
 
 @media (max-width: 768px) {
+    .portfolio-grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 1.25rem;
+    }
+
     .screenshot-hero-wrap {
         width: 100%;
     }
@@ -173,3 +336,10 @@
         grid-template-columns: 1fr;
     }
 }
+
+@media (max-width: 480px) {
+    .portfolio-grid {
+        grid-template-columns: 1fr;
+        gap: 1rem;
+    }
+}