/* Personal site visual system */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --ink: #172033; --muted: #637083; --rule: #dfe5eb; --accent: #116466; --accent-dark: #0b4f51; --display: 'Manrope', 'Helvetica Neue', Arial, sans-serif; --mono: 'DM Mono', 'SFMono-Regular', Consolas, monospace; }
body { background: #fff; color: var(--ink); font-family: var(--display); font-size: 16px; line-height: 1.72; }
.navbar { border-bottom: 1px solid var(--rule); min-height: 4.75rem; }
.navbar .navbar-brand, .navbar .nav-link { color: var(--ink) !important; font-size: .88rem; font-weight: 700; }
.navbar .navbar-brand { letter-spacing: -.025em; }
.navbar .nav-link { margin-left: .65rem; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--accent) !important; }
#quarto-content main.content { max-width: 1060px; padding-bottom: 5.5rem; padding-top: 4.5rem; }
.hero { max-width: 870px; padding: 3.8rem 0 5rem; }
.eyebrow { color: var(--accent); font-family: var(--mono); font-size: .73rem; font-weight: 500; letter-spacing: .08em; margin: 0 0 1.1rem; text-transform: uppercase; }
.hero h1, .cv-header h1 { color: var(--ink); font-family: var(--display); font-size: clamp(3.75rem, 9vw, 7.4rem); font-weight: 800; letter-spacing: -.085em; line-height: .88; margin: 0; }
.hero-headline { font-size: clamp(1.2rem, 2.4vw, 1.65rem); font-weight: 700; letter-spacing: -.035em; margin: 2.1rem 0 1.15rem; }
.hero-headline span { color: var(--accent); }
.hero-intro { color: var(--muted); font-size: 1.08rem; line-height: 1.75; margin: 0; max-width: 690px; }
.hero-actions { align-items: center; display: flex; flex-wrap: wrap; gap: .85rem 1.5rem; margin-top: 2.25rem; }
.button-link { background: var(--ink); border-radius: 2px; color: white; font-size: .88rem; font-weight: 700; padding: .73rem 1rem; text-decoration: none; }
.button-link:hover { background: var(--accent-dark); color: #fff; }
.button-link span { margin-left: .35rem; }
.social-link { align-items: center; color: var(--ink); display: inline-flex; font-size: .84rem; font-weight: 700; gap: .38rem; text-decoration: none; }
.social-link:hover { color: var(--accent); }
.social-link i { font-size: 1rem; line-height: 1; }
.focus { align-items: start; border-top: 1px solid var(--rule); display: grid; gap: 3rem; grid-template-columns: minmax(220px, .9fr) minmax(300px, 1.1fr); padding-top: 2.3rem; }
.focus h2 { font-size: 1.35rem; font-weight: 700; letter-spacing: -.045em; line-height: 1.25; margin: 0; }
.focus > p { color: var(--muted); margin: 0; }
.cv-header { border-bottom: 1px solid var(--rule); margin-bottom: 3.5rem; padding-bottom: 2.4rem; }
.cv-header h1 { font-size: clamp(3rem, 6vw, 5.3rem); }
.cv-header > p:last-child { color: var(--accent); font-size: 1.05rem; font-weight: 700; margin: 1.25rem 0 0; }
.cv-header ~ h2 { border-top: 1px solid var(--rule); font-size: .77rem; font-weight: 800; letter-spacing: .1em; margin: 3.7rem 0 1.5rem; padding-top: 1rem; text-transform: uppercase; }
.cv-header + h2 { border-top: 0; margin-top: 0; padding-top: 0; }
h2 + p { color: var(--muted); max-width: 780px; }
.cv-entry { border-top: 1px solid var(--rule); display: grid; gap: 2rem; grid-template-columns: 170px minmax(0, 1fr); padding: 1.45rem 0; }
.cv-entry.current { border-top: 2px solid var(--accent); }
.cv-entry-meta { color: var(--muted); font-family: var(--mono); font-size: .72rem; line-height: 1.6; padding-top: .25rem; }
.cv-entry h3 { font-size: 1.04rem; font-weight: 800; letter-spacing: -.025em; line-height: 1.4; margin: 0; }
.cv-entry h3 span { color: var(--accent); display: block; font-size: .88rem; font-weight: 600; letter-spacing: 0; margin-top: .15rem; }
.cv-entry p { color: var(--muted); margin: .55rem 0 0; max-width: 760px;   text-align: justify; }
.education-entry { padding: 1.1rem 0; }
.skill-list { color: var(--muted); max-width: 820px; }
.blog-header { border-bottom: 1px solid var(--rule); margin-bottom: 3.5rem; padding-bottom: 2.4rem; }
.blog-header h1 { color: var(--ink); font-size: clamp(3rem, 6vw, 5.3rem); font-weight: 800; letter-spacing: -.075em; line-height: .95; margin: 0; }
.blog-header > p:last-child { color: var(--muted); font-size: 1.05rem; margin: 1.25rem 0 0; max-width: 630px; }
#listing-listing { max-width: 780px; }
#listing-listing .quarto-post { border-color: var(--rule); padding: 1.6rem 0; }
#listing-listing .listing-title { color: var(--ink); font-size: 1.25rem; font-weight: 800; letter-spacing: -.04em; }
#listing-listing .listing-title:hover { color: var(--accent); }
#listing-listing .listing-description, #listing-listing .listing-date { color: var(--muted); }
#listing-listing .listing-category { background: transparent; border: 1px solid var(--rule); border-radius: 2px; color: var(--accent); font-family: var(--mono); font-size: .68rem; }
@media (max-width: 767px) { #quarto-content main.content { padding-bottom: 3.5rem; padding-top: 1.75rem; } .hero { padding: 2.4rem 0 3.4rem; } .hero h1 { letter-spacing: -.075em; } .focus { gap: 1.4rem; grid-template-columns: 1fr; } .cv-header { margin-bottom: 2.6rem; } .cv-entry { gap: .35rem; grid-template-columns: 1fr; } .cv-entry-meta { padding-top: 0; } }