:root{--bg:#ffffff;--panel:#f3f6fb;--ink:#12233f;--muted:#52627a;--line:#dce4ef;--lime:#225bd5;color-scheme:light}
.nav-contact{border-color:#c7d4e8;background:#f5f8fd}.hero-intro,.project>p,.case-narrative p{color:var(--muted)}
.button{background:#225bd5;color:#fff;border-color:#225bd5}.button:hover{background:#1946ac;border-color:#1946ac}.skip{color:#fff}::selection{background:#225bd5;color:#fff}
.eyebrow,.wordmark span{color:#225bd5}.profile-summary{border-color:var(--line)}
.case-feature{background:#142a4d;color:#fff;box-shadow:0 10px 32px #142a4d12}.case-copy{border-color:#ffffff29}.case-copy>p,.result-visual>small{color:#d1def2}.case-feature .label{color:#aac9ff}.case-feature .tags{color:#d1def2}.case-feature .tags span{border-color:#7896c260}.case-feature .text-link{color:#fff}.metric{color:#fff}.metric-arrow{color:#80b5ff}.before{background:#7995bb}.after{background:#61a4ff}.bar-row{color:#e2ecfc}
.implementation{background:#f2f6fd;border-color:#d3dff1}.pipeline b{background:#fff;border-color:#b9cdee;color:#225bd5}.pipeline li:not(:last-child):after{background:#c5d5ed}.campaign-grid>div{border-color:#719bea}
.project-image,.project-image.sulawesi,.project-image.titik{background:#edf2fa;border-color:#d8e2f0}.browser-bar{background:#fff;color:#52627a;border:1px solid #dce4ef;border-bottom:0}.browser-bar i{background:#a7b7d0}.project .tags{color:#405777}.project .tags span{background:#f4f7fc;border-color:#d4dfef}.status-note{color:#82530c}.technical img{border:1px solid #dce4ef}.proof-grid figure{background:#f3f6fb}.contact{background:#f6f8fc}.contact .email{color:#225bd5}
@media(max-width:760px){.case-copy{border-bottom-color:#ffffff29}}
.ai-work{margin-top:25px;padding:22px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--lime);border-radius:6px}.ai-work h3{font-size:18px;line-height:1.4;font-weight:600}.ai-work p{margin-top:10px;color:var(--muted);font-size:16px;line-height:1.8}

.metrics-comparison{margin:28px 0 16px;overflow-x:auto;border:1px solid #dbe3ef;border-radius:12px;background:#fff}
.metrics-comparison table{width:100%;border-collapse:collapse;font-size:1rem;text-align:left;color:#14243d}
.metrics-comparison caption{text-align:left;padding:18px 20px;font-weight:600;color:#14243d}
.metrics-comparison th,.metrics-comparison td{padding:16px 20px;border-top:1px solid #dbe3ef}
.metrics-comparison thead{background:#f0f5fc}.metrics-comparison tbody th{font-weight:500}.metrics-comparison td{white-space:nowrap;font-variant-numeric:tabular-nums}
.metrics-takeaway{max-width:850px;line-height:1.7;margin:0 0 28px;color:#41516a}.metrics-takeaway strong{color:#174bb8}
@media(max-width:600px){.metrics-comparison table{font-size:.875rem}.metrics-comparison th,.metrics-comparison td{padding:12px 10px}.metrics-comparison caption{padding:14px 10px}}

.after{width:23.21869%}.tags span{font-size:13px}.bar-row>div:first-child{font-size:12px}.result-visual>small{font-size:12px}.timeline article>span{font-size:13px}

/* Readable supporting text and native image proportions. */
.eyebrow,.step,.label,.case-copy .label,.project-meta,.project .tags span,.tags span,.case-context>span,.profile-summary>p,.profile-summary b,.pipeline small,.pipeline b,.expertise>div>span,.timeline article>span,.timeline article p,.education>span,.proof-grid figcaption,.proof-grid figcaption>span,.evidence-note,.technical figcaption,.result-visual>small,.bar-row>div:first-child,.phone,footer>span{font-size:14px;line-height:1.65}
.eyebrow,.step,.project-meta{letter-spacing:1px}.case-copy>p,.implementation p,.campaign-grid p,.project ul{font-size:16px}
.project-image img{aspect-ratio:auto;object-fit:contain;transform:none}.project-image:hover img{transform:none}
.proof-grid img{width:auto;max-width:100%;max-height:none;height:auto;margin-inline:auto}
.technical img{width:auto;max-width:100%;height:auto;display:block}
.original-image-link{grid-column:2;justify-self:start;font-size:14px;line-height:1.6;color:var(--muted);text-decoration:underline;text-underline-offset:4px;margin-top:14px}
@media(max-width:760px){.original-image-link{display:inline-block}.nav nav{font-size:14px}.nav nav{gap:12px}.nav-contact{padding:8px 10px}}

/* Clear section hierarchy for readers scanning the portfolio. */
.section-heading .eyebrow,.about-heading>.eyebrow,.experience>div>.eyebrow,.contact>.eyebrow{font-size:16px;font-weight:700;line-height:1.5;letter-spacing:1px}
.case-study h2,.work h2,.about h2,.experience h2,.contact h2{font-size:40px;font-weight:650;line-height:1.2;letter-spacing:-1px}
.section-heading h2,.about h2,.experience h2{margin-top:16px}
.step{font-size:16px;font-weight:650;line-height:1.5}
@media(max-width:760px){.case-study h2,.work h2,.about h2,.experience h2,.contact h2{font-size:30px;line-height:1.25;letter-spacing:-.6px}.section-heading .eyebrow,.about-heading>.eyebrow,.experience>div>.eyebrow,.contact>.eyebrow{font-size:16px;letter-spacing:.6px}}

/* Main chapters stand apart from the unnumbered case-study subheadings. */
.section-heading .eyebrow,.about-heading>.eyebrow,.experience>div>.eyebrow{display:inline-flex;max-width:100%;padding:10px 16px;background:#225bd5;color:#fff;border-radius:6px;font-size:16px;font-weight:700;line-height:1.5;letter-spacing:.6px}
.step{font-size:14px;font-weight:700;letter-spacing:1px;color:#52627a}
@media(max-width:760px){.section-heading .eyebrow,.about-heading>.eyebrow,.experience>div>.eyebrow{padding:9px 12px;font-size:16px}}