/* ==========================================================
   Custom overrides — cleaner, easier-to-read layout (2026)
   ========================================================== */
body { color: #3a4650; }
.section-title p { max-width: 720px; margin: 0 auto; color: #6c7a86; font-size: 15.5px; line-height: 1.7; }
.subsection-title { font-size: 22px; font-weight: 700; color: #45505b; margin: 10px 0 22px; }
.subsection-title small { font-size: 14px; font-weight: 400; color: #7b8791; margin-left: 8px; }

/* About */
.about .content h3 { margin-bottom: 8px; }
.about .content .role-line { color: #0563bb; font-weight: 600; margin-bottom: 16px; }
.about .content p.bio { font-size: 15.5px; line-height: 1.75; color: #45505b; }
.about .content ul li { margin-bottom: 12px; font-size: 14.5px; }

/* Skills — CV-style groups, no percentages */
.skill-card { width: 100%; background: #fff; border: 1px solid #eef1f4; border-radius: 10px; padding: 22px 24px; height: 100%; box-shadow: 0 5px 30px rgba(110,123,131,.05); }
.skill-card h4 { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: #0563bb; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.skill-card h4 i { font-size: 20px; line-height: 1; }
.skill-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.skill-tags li { background: #f2f6fb; color: #45505b; border-radius: 6px; padding: 5px 11px; font-size: 13.5px; line-height: 1.4; }
.skill-card.featured { border-color: #cfe1f7; background: linear-gradient(180deg, #f7fbff 0%, #fff 100%); }
.skill-card.featured .skill-tags li { background: #e6f0fb; color: #0a4f9c; }

/* Resume */
.resume .resume-item h4 { text-transform: none; line-height: 1.3; }
.resume .resume-item p, .resume .resume-item li { font-size: 14.5px; line-height: 1.65; }
.resume .resume-item ul li { padding-bottom: 6px; }
.resume .resume-item .company { color: #6c7a86; font-style: italic; margin-bottom: 8px; }

/* Portfolio — highlighted cards */
.project-card { background: #fff; border-radius: 10px; padding: 26px 26px 22px; height: 100%; box-shadow: 0 5px 30px rgba(110,123,131,.06); border-top: 3px solid #0563bb; display: flex; flex-direction: column; }
.project-card h4 { font-size: 17px; font-weight: 700; color: #45505b; margin-bottom: 6px; line-height: 1.35; }
.project-card h4 a { color: inherit; }
.project-card h4 a:hover { color: #0563bb; }
.project-card .meta { font-size: 13px; color: #7b8791; margin-bottom: 12px; }
.project-card p { font-size: 14.5px; line-height: 1.65; flex: 1; margin-bottom: 14px; }
.project-card .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.project-card .tags span { font-size: 12px; background: #eef4fb; color: #0563bb; padding: 3px 10px; border-radius: 20px; }

/* Portfolio — compact table */
.project-table { font-size: 14px; margin-bottom: 0; background: #fff; }
.project-table thead th { font-weight: 600; color: #45505b; border-top: 0; border-bottom: 2px solid #e6eaee; white-space: nowrap; font-size: 13px; text-transform: uppercase; letter-spacing: .4px; }
.project-table td, .project-table th { vertical-align: middle; padding: 12px 14px; }
.project-table td.num { color: #a0a9b1; width: 44px; }
.project-table td small { color: #7b8791; display: block; font-size: 12.5px; margin-top: 2px; }
.project-table td.period { white-space: nowrap; color: #7b8791; }
.project-table tr.more { display: none; }
.project-table.expanded tr.more { display: table-row; }
.table-card { background: #fff; border-radius: 10px; box-shadow: 0 5px 30px rgba(110,123,131,.06); overflow: hidden; }
.btn-outline-brand { border: 1px solid #0563bb; color: #0563bb; background: #fff; border-radius: 30px; padding: 9px 28px; font-weight: 600; font-size: 14px; transition: .3s; cursor: pointer; }
.btn-outline-brand:hover { background: #0563bb; color: #fff; }

/* CV */
.btn-brand { background: #0563bb; color: #fff; border-radius: 30px; padding: 13px 34px; font-weight: 600; display: inline-flex; align-items: center; gap: 10px; transition: .3s; font-size: 15px; }
.btn-brand:hover { background: #0678e3; color: #fff; }
.btn-brand i { font-size: 20px; }

/* Services */
.services .icon-box { padding: 50px 24px 56px; border-radius: 10px; }
.services .icon-box p { font-size: 14.5px; line-height: 1.65; }

@media (max-width: 767px) {
  .project-table td, .project-table th { padding: 10px 10px; }
}

/* Founder / Janiva */
.founder-badge { display: inline-flex; align-items: center; gap: 10px; background: #f3f6f2; border: 1px solid #dfe6dc; border-radius: 30px; padding: 6px 16px 6px 6px; margin-bottom: 18px; color: #45505b; font-size: 14px; transition: .3s; }
.founder-badge:hover { background: #e9efe6; color: #2f3a33; }
.founder-badge img { width: 30px; height: 30px; border-radius: 50%; }
.project-card.founder { border-top-color: #8a9c7f; }
.project-card .brand { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.project-card .brand img { width: 40px; height: 40px; object-fit: contain; }
.badge-founder { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; background: #8a9c7f; color: #fff; padding: 3px 10px; border-radius: 20px; }

/* Portfolio document callout */
.portfolio-doc { display: flex; align-items: center; gap: 20px; background: #fff; border-radius: 10px; padding: 22px 26px; box-shadow: 0 5px 30px rgba(110,123,131,.06); border-left: 4px solid #0563bb; }
.portfolio-doc-icon { width: 52px; height: 52px; border-radius: 12px; background: #eef4fb; color: #0563bb; display: flex; align-items: center; justify-content: center; font-size: 28px; flex-shrink: 0; }
.portfolio-doc-text { flex: 1; }
.portfolio-doc-text h4 { font-size: 17px; font-weight: 700; color: #45505b; margin-bottom: 4px; }
.portfolio-doc-text p { margin: 0; font-size: 14px; color: #6c7a86; line-height: 1.6; }
.doc-updated { display: inline-block; font-size: 12px; font-weight: 600; color: #0563bb; background: #eef4fb; padding: 2px 10px; border-radius: 20px; margin-left: 6px; }
.portfolio-doc .btn-outline-brand { white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 767px) { .portfolio-doc { flex-direction: column; align-items: flex-start; } }

.badge-org { font-size: 12px; font-weight: 600; color: #6c7a86; background: #f2f4f6; padding: 3px 10px; border-radius: 20px; }

/* ===== Resume (modern) ===== */
.subsection-title i { color: #0563bb; font-size: 22px; vertical-align: -3px; margin-right: 4px; }
.rs-summary { display: grid; grid-template-columns: 1.6fr 1fr; gap: 32px; background: #fff; border-radius: 14px; padding: 32px 36px; box-shadow: 0 5px 30px rgba(110,123,131,.07); margin-bottom: 30px; }
.rs-summary h3 { font-size: 24px; font-weight: 700; color: #2f3a44; margin-bottom: 4px; }
.rs-role { color: #0563bb; font-weight: 600; font-size: 14.5px; margin-bottom: 14px; }
.rs-summary p { font-size: 15px; line-height: 1.75; color: #4a5560; margin: 0; }
.rs-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-self: center; }
.rs-stat { background: #f4f8fd; border-radius: 12px; padding: 18px 12px; text-align: center; }
.rs-stat strong { display: block; font-family: "Poppins", sans-serif; font-size: 28px; font-weight: 700; color: #0563bb; line-height: 1.1; }
.rs-stat span { font-size: 12px; color: #6c7a86; display: block; margin-top: 4px; line-height: 1.3; }

.xp-timeline { position: relative; }
.xp-item { display: grid; grid-template-columns: 96px 28px 1fr; gap: 0 14px; margin-bottom: 22px; }
.xp-period { text-align: right; padding-top: 22px; font-size: 13px; color: #7b8791; line-height: 1.5; }
.xp-period span { display: block; }
.xp-start { font-weight: 600; color: #45505b; }
.xp-item.current .xp-end { color: #0563bb; font-weight: 600; }
.xp-rail { position: relative; }
.xp-rail::before { content: ""; position: absolute; left: 13px; top: 0; bottom: -22px; width: 2px; background: #e4e9ee; }
.xp-item:last-child .xp-rail::before { bottom: 0; }
.xp-dot { position: absolute; left: 8px; top: 26px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid #0563bb; }
.xp-item.current .xp-dot { background: #0563bb; box-shadow: 0 0 0 5px rgba(5,99,187,.15); }
.xp-card { background: #fff; border-radius: 14px; padding: 22px 24px; box-shadow: 0 5px 30px rgba(110,123,131,.07); transition: .25s; }
.xp-card:hover { transform: translateY(-2px); box-shadow: 0 10px 34px rgba(110,123,131,.13); }
.xp-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.xp-logo { width: 46px; height: 46px; border-radius: 12px; background: #f2f6fb; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.xp-logo img { width: 34px; height: 34px; object-fit: contain; }
.xp-logo span { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 18px; color: #0563bb; }
.xp-logo i { font-size: 22px; color: #0563bb; }
.xp-card h4 { font-size: 17px; font-weight: 700; color: #2f3a44; margin: 0 0 2px; line-height: 1.3; }
.xp-card h4 em { font-style: normal; font-weight: 500; color: #7b8791; font-size: 14px; margin-left: 6px; }
.xp-company { font-size: 14px; color: #4a5560; }
.xp-company a { color: #0563bb; font-weight: 600; }
.xp-loc { color: #98a2ab; font-size: 12.5px; margin-left: 8px; white-space: nowrap; }
.xp-loc i { vertical-align: -2px; }
.xp-card ul { list-style: none; padding: 0; margin: 0 0 12px; }
.xp-card ul li { position: relative; padding-left: 18px; font-size: 14.5px; line-height: 1.65; color: #4a5560; margin-bottom: 6px; }
.xp-card ul li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: #0563bb; opacity: .55; }
.xp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.xp-tags span { font-size: 12px; background: #f2f4f6; color: #5b6770; padding: 3px 10px; border-radius: 20px; }

.edu-card { background: #fff; border-radius: 14px; padding: 22px 24px; box-shadow: 0 5px 30px rgba(110,123,131,.07); margin-bottom: 16px; }
.edu-years { display: inline-block; font-size: 12px; font-weight: 600; color: #0563bb; background: #eef4fb; padding: 3px 10px; border-radius: 20px; margin-bottom: 10px; }
.edu-card h4 { font-size: 16px; font-weight: 700; color: #2f3a44; margin-bottom: 4px; line-height: 1.35; }
.edu-school { font-size: 13.5px; color: #7b8791; margin-bottom: 8px; }
.edu-card p { font-size: 14px; line-height: 1.65; color: #4a5560; margin: 0; }
.edu-card code { font-size: 12.5px; background: #f2f4f6; color: #45505b; padding: 1px 6px; border-radius: 4px; }
.contact-card ul { list-style: none; padding: 0; margin: 0; }
.contact-card li { font-size: 14px; color: #4a5560; padding: 6px 0; display: flex; align-items: center; gap: 10px; }
.contact-card li i { color: #0563bb; font-size: 18px; }

@media (max-width: 991px) {
  .rs-summary { grid-template-columns: 1fr; padding: 26px 24px; }
}
@media (max-width: 575px) {
  .xp-item { grid-template-columns: 22px 1fr; }
  .xp-period { grid-column: 2; text-align: left; padding: 0 0 6px; display: flex; gap: 6px; }
  .xp-period .xp-end::before { content: "– "; }
  .xp-rail { grid-row: 1 / span 2; }
  .xp-card { grid-column: 2; }
  .xp-rail::before { left: 10px; }
  .xp-dot { left: 5px; top: 4px; }
}

@media (min-width: 992px) { .rs-side { position: sticky; top: 24px; } }

/* Skills footnote */
.skills-footnote { text-align: center; font-size: 13px; color: #8a949d; margin: 22px 0 0; }


.xp-card ul li strong { color: #2f3a44; font-weight: 700; }

/* Reading width: narrower container + more breathing room on desktop */
@media (min-width: 1200px) {
  #main .container { max-width: 1100px; padding-left: 32px; padding-right: 32px; }
  section { padding: 76px 0; }
}
@media (min-width: 1500px) {
  #main .container { max-width: 1140px; }
}