/* ============================================================
   Project Cards — main page portfolio section
   ============================================================ */

#portfolio .project-card {
   background: #1a1a1a;
   margin-bottom: 20px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
}

#portfolio .project-card .card-image {
   position: relative;
   overflow: hidden;
   aspect-ratio: 16 / 9;
   background: #111;
}

#portfolio .project-card .card-image img,
#portfolio .project-card .card-image video {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform 0.4s ease, opacity 0.4s ease;
}

#portfolio .project-card:hover .card-image img,
#portfolio .project-card:hover .card-image video {
   transform: scale(1.05);
   opacity: 0.75;
}

#portfolio .project-card .card-info {
   padding: 16px 18px 18px;
   flex: 1;
   display: flex;
   flex-direction: column;
}

#portfolio .project-card .card-info h5 {
   color: #fff;
   font: 15px/1.4em 'opensans-bold', sans-serif;
   margin-bottom: 7px;
   margin-top: 0;
}

#portfolio .project-card .card-info .card-context {
   color: #11ABB0;
   font: 11px 'opensans-bold', sans-serif;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   margin-bottom: 8px;
}

#portfolio .project-card .card-info p {
   color: #888;
   font: 13px/1.6em 'librebaskerville-regular', serif;
   margin-bottom: 14px;
   flex: 1;
   text-align: left;
}

#portfolio .project-card .card-link {
   color: #11ABB0;
   font: 12px 'opensans-bold', sans-serif;
   text-decoration: none;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   transition: color 0.2s;
   align-self: flex-start;
}

#portfolio .project-card .card-link:hover {
   color: #fff;
}

#portfolio .view-all-wrap {
   text-align: center;
   margin-top: 40px;
}

#portfolio .view-all-wrap .button {
   background: transparent;
   border: 1px solid #fff;
   color: #fff;
   font: 14px 'opensans-bold', sans-serif;
   text-transform: uppercase;
   letter-spacing: 2px;
   padding: 12px 30px;
   text-decoration: none;
   display: inline-block;
   transition: all 0.25s;
}

#portfolio .view-all-wrap .button:hover {
   background: #11ABB0;
   border-color: #11ABB0;
}

/* ============================================================
   All-Projects Page
   ============================================================ */

.all-projects-page {
   background: #0f0f0f;
   min-height: 100vh;
}

.projects-header {
   background: #111;
   padding: 50px 40px 40px;
   border-bottom: 1px solid #222;
}

.projects-header .back-nav {
   margin-bottom: 20px;
}

.projects-header .back-nav a {
   color: #95a3a3;
   text-decoration: none;
   font: 13px 'opensans-regular', sans-serif;
   transition: color 0.2s;
}

.projects-header .back-nav a:hover { color: #11ABB0; }

.projects-header h1 {
   color: #fff;
   font: 36px/1.1em 'opensans-bold', sans-serif;
   margin: 0 0 8px;
}

.projects-header p {
   color: #888;
   font: 15px 'librebaskerville-regular', serif;
   margin: 0;
}

.projects-grid-section {
   padding: 50px 40px 80px;
   max-width: 1200px;
   margin: 0 auto;
}

/* ============================================================
   Individual Project Page
   ============================================================ */

.single-project-page {
   background: #0f0f0f;
   min-height: 100vh;
}

.project-nav-bar {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 500;
   background: rgba(10, 10, 10, 0.96);
   padding: 14px 40px;
   display: flex;
   align-items: center;
   gap: 6px;
   border-bottom: 1px solid #222;
   backdrop-filter: blur(6px);
}

.project-nav-bar a {
   color: #888;
   text-decoration: none;
   font: 13px 'opensans-regular', sans-serif;
   transition: color 0.2s;
}

.project-nav-bar a:hover { color: #11ABB0; }

.project-nav-bar .sep {
   color: #444;
   font-size: 14px;
   margin: 0 4px;
}

.project-nav-bar .current-title {
   color: #fff;
   font: 13px 'opensans-bold', sans-serif;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.project-hero-section {
   padding-top: 52px;
   background: #111;
   text-align: center;
}

.project-hero-section video,
.project-hero-section img {
   max-width: 100%;
   max-height: 520px;
   object-fit: contain;
   display: inline-block;
}

.project-body {
   max-width: 860px;
   margin: 0 auto;
   padding: 52px 30px 90px;
}

.project-body .project-context {
   color: #11ABB0;
   font: 12px 'opensans-bold', sans-serif;
   text-transform: uppercase;
   letter-spacing: 2.5px;
   margin-bottom: 12px;
}

.project-body h1 {
   color: #fff;
   font: 32px/1.25em 'opensans-bold', sans-serif;
   margin-bottom: 22px;
}

.project-body .tags {
   margin-bottom: 32px;
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
}

.project-body .tag {
   background: #1a1a1a;
   color: #95a3a3;
   padding: 5px 14px;
   border-radius: 20px;
   font: 12px 'opensans-regular', sans-serif;
   border: 1px solid #2e2e2e;
}

.project-body .description {
   color: #A8A8A8;
   font: 16px/1.85em 'librebaskerville-regular', serif;
   margin-bottom: 30px;
}

.project-body .description p { margin-bottom: 18px; }

.project-body .description ul {
   padding-left: 20px;
   margin-bottom: 18px;
}

.project-body .description li {
   margin-bottom: 6px;
}

.project-body .project-links {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
   margin-top: 36px;
   padding-top: 30px;
   border-top: 1px solid #222;
}

.project-body .project-links a {
   display: inline-block;
   padding: 10px 22px;
   background: transparent;
   border: 1px solid #555;
   color: #ccc;
   text-decoration: none;
   font: 12px 'opensans-bold', sans-serif;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   transition: all 0.2s;
}

.project-body .project-links a:hover {
   background: #11ABB0;
   border-color: #11ABB0;
   color: #fff;
}

@media only screen and (max-width: 767px) {
   .project-nav-bar { padding: 12px 18px; }
   .project-nav-bar .current-title { display: none; }
   .project-body { padding: 36px 20px 60px; }
   .project-body h1 { font-size: 24px; }
   .projects-header { padding: 36px 20px 28px; }
   .projects-grid-section { padding: 30px 20px 60px; }
}

/* ============================================================
   2-D Packed Word Cloud (wordcloud2.js)
   ============================================================ */

#wordCloud {
   position: relative;
   display: block;
   margin: 10px auto 0;
   cursor: default;
   /* width + height set dynamically by JS */
   /* fade words out at left and right edges */
   -webkit-mask-image: linear-gradient(to right, transparent, #000 55px, #000 calc(100% - 55px), transparent);
   mask-image:         linear-gradient(to right, transparent, #000 55px, #000 calc(100% - 55px), transparent);
}

/* colour legend dots */
.wc-legend {
   display: flex;
   gap: 18px;
   flex-wrap: wrap;
   margin: 12px 0 0;
   justify-content: center;
}
.wc-legend span {
   font: 11px 'opensans-regular', sans-serif;
   color: #888;
   display: flex;
   align-items: center;
   gap: 5px;
}
.wc-legend span::before {
   content: '';
   display: inline-block;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: currentColor;
   flex-shrink: 0;
}
.wc-legend .leg-hw   { color: #11ABB0; }
.wc-legend .leg-algo { color: #3D7BC8; }
.wc-legend .leg-lang { color: #6B7B8A; }

.wc-section-label {
   text-align: center;
   font: 11px 'opensans-bold', sans-serif;
   color: #555;
   text-transform: uppercase;
   letter-spacing: 2.5px;
   margin-bottom: 10px;
   margin-top: 40px;
}

.wc-hint {
   text-align: center;
   font: italic 12px 'librebaskerville-regular', serif;
   color: #aaa;
   margin-bottom: 2px;
}