:root { color-scheme: light; --page: #f5f2ea; --surface: #fffdfa; --surface-2: #ebe6dc; --ink: #161616; --text: #343331; --muted: #74716b; --line: #d8d1c5; --accent: #b44832; --accent-ink: #7b2f22; --focus: 0 0 0 2px var(--page), 0 0 0 5px rgba(180, 72, 50, .28); --shadow-sm: 0 1px 2px rgba(22, 20, 16, .04); --measure: 1160px; --radius: 10px; --card-head-h: 48px; --touch: 44px; --gutter: 16px; --nav-offset: calc(12px + env(safe-area-inset-top, 0px)); --overview-gap: 24px; --space-1: 8px; --space-2: 12px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 40px; --overview-cols: 1024px; --ease: cubic-bezier(.22, 1, .36, 1); --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; --label: .6875rem; --caption: .75rem; --body: .9375rem; --hairline: color-mix(in srgb, var(--line) 72%, transparent); }
*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; overflow-x: hidden; scroll-behavior: smooth; scroll-padding-top: var(--nav-offset); background: var(--page); color: var(--ink); font-family: var(--sans), sans-serif; font-size: 16px; line-height: 1.5; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
body { min-height: 100%; margin: 0; background: var(--page); color: var(--text); }
button, .chip, .contact-actions button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button, a { font: inherit; }
:focus { outline: none; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent-ink); }
a:focus-visible, button:focus-visible { box-shadow: var(--focus); border-radius: calc(var(--radius) - 2px); }
::selection { background: rgba(180, 72, 50, .16); }
h1, h2, h3, p, dl, dd { margin: 0; }
.page-shell { inline-size: min(calc(100% - 2 * var(--gutter)), var(--measure)); margin-inline: auto; padding: calc(16px + env(safe-area-inset-top, 0px)) 0 calc(40px + env(safe-area-inset-bottom, 0px)); }
.hero { display: grid; gap: 8px; border: 0; margin: 0; padding-bottom: 0; }
.hero-kicker { color: var(--accent-ink); font: 700 var(--label)/1.25 var(--mono), monospace; letter-spacing: .1em; text-transform: uppercase; }
h1 { color: var(--ink); font-size: 1.75rem; line-height: 1.08; letter-spacing: -.02em; font-weight: 700; overflow-wrap: anywhere; }
.hero-role { display: grid; gap: 4px; font-size: var(--body); line-height: 1.4; }
.hero-role-title { font-weight: 600; color: var(--ink); }
.hero-role-meta { color: var(--muted); font-size: var(--caption); font-weight: 500; }
.hero .contact-actions { display: none; }
.page-index { display: flex; flex-wrap: nowrap; gap: 8px; padding: 0 0 2px; margin: 12px 0 20px; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: auto hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
.page-index::-webkit-scrollbar { display: none; }
.page-index a { flex: 0 0 auto; scroll-snap-align: start; min-block-size: var(--touch); display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: var(--caption); font-weight: 600; white-space: nowrap; line-height: 1; transition: background 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease); }
.page-index a:hover { background: var(--surface-2); color: var(--ink); }
.page-index a.is-current { background: var(--ink); color: var(--surface); border-color: var(--ink); font-weight: 650; }
.overview-band { display: grid; gap: var(--overview-gap); margin-bottom: var(--space-2); container-type: inline-size; container-name: overview; }
.hero-panels { display: grid; gap: 0; margin: 0; }
.signal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: 0; border: 0; }
.signal-grid > .signal-item { display: flex; flex-direction: column; gap: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; }
.signal-grid dt { display: flex; align-items: center; min-block-size: var(--card-head-h); margin: 0; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); color: var(--muted); font: 700 var(--label)/1.25 var(--mono), monospace; letter-spacing: .09em; text-transform: uppercase; }
.signal-grid dd { margin: 0; padding: 12px 14px 14px; color: var(--ink); font-size: var(--body); font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.overview-lead { padding: 0; margin: 0; border: 0; }
.lead-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.lead-grid article { display: flex; flex-direction: column; gap: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; }
.lead-grid article > span { display: flex; align-items: center; min-block-size: var(--card-head-h); padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font-size: var(--body); font-weight: 650; letter-spacing: 0; text-transform: none; font-family: var(--sans), sans-serif; }
.lead-grid article p { padding: 14px 16px 16px; color: var(--text); font-size: var(--body); line-height: 1.52; }
@container overview (min-width: 1024px) {
    .lead-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
    .signal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
}
@supports not (container-type: inline-size) {
    @media (min-width: 1024px) {
        .lead-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
        .signal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
    }
}
.section-block { padding: 20px 0; border-bottom: 1px solid var(--hairline); }
.section-block:last-child { border-bottom: 0; }
.section-heading { display: grid; gap: 6px; margin-bottom: 14px; }
.section-heading h2 { color: var(--ink); font-size: 1.25rem; line-height: 1.1; letter-spacing: -.015em; font-weight: 700; }
.section-heading span { color: var(--muted); font: 700 var(--label)/1.35 var(--mono), monospace; letter-spacing: .09em; text-transform: uppercase; }
.domain-list { display: flex; flex-wrap: wrap; gap: 8px; }
.domain-list span { display: inline-flex; align-items: center; min-block-size: 32px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: var(--caption); font-weight: 600; line-height: 1.2; }
.expertise-grid { display: grid; gap: 0; border: 0; }
.expertise-grid article { display: grid; gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.expertise-grid article:last-child { border-bottom: 0; padding-bottom: 0; }
.expertise-grid article:first-child { padding-top: 0; }
.expertise-grid article > span { color: var(--ink); font-size: var(--body); font-weight: 650; line-height: 1.25; }
.expertise-grid article p { color: var(--muted); font-size: var(--caption); line-height: 1.5; }
.systems-map { display: grid; }
.systems-columns { display: grid; gap: 0; border: 0; }
.systems-columns article { padding: 0; border-bottom: 1px solid var(--hairline); }
.systems-columns article:last-child { border-bottom: 0; }
.systems-details { padding: 0; }
.systems-details[open] > ul { display: grid; }
.systems-details summary { display: flex; align-items: center; min-block-size: var(--touch); padding: 0; list-style: none; cursor: pointer; }
.systems-details summary::-webkit-details-marker { display: none; }
.systems-summary { color: var(--ink); font-size: var(--body); font-weight: 650; line-height: 1.2; }
.systems-details summary::after { content: "+"; margin-left: auto; padding-left: 12px; color: var(--muted); font: 700 1.125rem/1 var(--mono), monospace; }
.systems-details[open] summary::after { content: "−"; }
.systems-columns ul { display: grid; gap: 6px; margin: 0; padding: 0 0 14px; list-style: none; }
.systems-columns li, .foundation-list li { position: relative; padding-left: 14px; color: var(--text); font-size: var(--caption); line-height: 1.45; overflow-wrap: anywhere; }
.systems-columns li::before, .foundation-list li::before { content: ""; position: absolute; left: 0; top: .55em; inline-size: 5px; block-size: 5px; border-radius: 50%; background: var(--accent); }
.timeline { display: grid; gap: 0; }
.timeline-item { display: grid; gap: 8px; padding: 16px 0; border-top: 1px solid var(--hairline); }
.timeline-item:first-child { border-top: 0; padding-top: 0; }
.timeline-meta { display: grid; gap: 4px; }
.timeline-date { color: var(--muted); font: 700 var(--label)/1.35 var(--mono), monospace; letter-spacing: .08em; text-transform: uppercase; }
.timeline-meta h3 { color: var(--ink); font-size: var(--body); line-height: 1.3; font-weight: 650; overflow-wrap: anywhere; }
.timeline-company { color: var(--muted); font-size: var(--caption); font-weight: 600; overflow-wrap: anywhere; }
.timeline-location { color: var(--muted); font-size: var(--caption); font-weight: 500; }
.timeline-item p { color: var(--text); font-size: var(--caption); line-height: 1.52; }
.stack-line { color: var(--muted); font: 600 var(--label)/1.45 var(--mono), monospace; overflow-wrap: anywhere; }
.detail-grid { display: grid; gap: 0; border: 0; }
.detail-grid article { display: grid; gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.detail-grid article:last-child { border-bottom: 0; padding-bottom: 0; }
.detail-grid article:first-child { padding-top: 0; }
.detail-grid article > span { color: var(--muted); font: 700 var(--label)/1.35 var(--mono), monospace; letter-spacing: .08em; text-transform: uppercase; }
.detail-grid strong { color: var(--ink); font-size: var(--body); line-height: 1.4; font-weight: 650; overflow-wrap: anywhere; }
.detail-grid small { color: var(--muted); font-size: var(--caption); }
.foundation-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.contact-panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-sm); }
.contact-panel-intro { display: grid; gap: 4px; padding: 14px 16px; border-bottom: 1px solid var(--hairline); background: var(--surface-2); }
.contact-panel-name { margin: 0; color: var(--ink); font-size: var(--body); font-weight: 650; }
.contact-panel-intro p { color: var(--muted); font-size: var(--caption); }
.contact-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.chip, .contact-actions button, .contact-links a { min-block-size: var(--touch); display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); font-size: var(--caption); font-weight: 600; text-decoration: none; cursor: pointer; transition: background 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease), transform 120ms var(--ease); }
.chip:hover, .contact-actions button:hover, .contact-links a:hover { background: var(--surface-2); border-color: color-mix(in srgb, var(--line) 65%, var(--ink)); }
.chip:active, .contact-actions button:active, .contact-links a:active { transform: translateY(1px); }
.contact-links a[href="/milos_savara_cv.pdf"] { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 24%, var(--line)); color: var(--accent-ink); font-weight: 650; }
.contact-links { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 14px 16px 16px; }
.contact-links > a, .contact-links > .contact-actions { inline-size: 100%; }
.contact-links .chip { inline-size: 100%; }
@media (min-width: 480px) {
    h1 { font-size: 2rem; }
    .section-heading h2 { font-size: 1.375rem; }
    .contact-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .contact-links > .contact-actions { grid-column: 1 / -1; }
}
@media (min-width: 640px) {
    :root { --gutter: 20px; --overview-gap: 28px; }
    .page-shell { padding-top: calc(20px + env(safe-area-inset-top, 0px)); }
    .section-block { padding: 28px 0; }
    .timeline-item p { font-size: var(--body); }
    .expertise-grid article p { font-size: var(--body); }
}
@media (min-width: 768px) {
    :root { --gutter: 24px; --nav-offset: calc(52px + env(safe-area-inset-top, 0px)); --overview-gap: 32px; }
    body { background: linear-gradient(90deg, rgba(22, 22, 22, .045) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(180deg, rgba(255, 253, 250, .9), rgba(245, 242, 234, .94)); }
    body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(900px 420px at 50% -8%, rgba(255, 255, 255, .72), transparent 70%); }
    .page-shell { padding-top: calc(24px + env(safe-area-inset-top, 0px)); padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; }
    .hero { grid-template-columns: minmax(0, 1fr) max-content; grid-template-areas: "kicker contact" "title contact" "role contact"; align-items: start; column-gap: 20px; padding-bottom: 20px; order: 1; }
    .hero-kicker { grid-area: kicker; font-size: .68rem; }
    .hero h1 { grid-area: title; font-size: clamp(2.8rem, 7vw, 4.8rem); }
    .hero-role { grid-area: role; display: block; max-inline-size: 42rem; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); font-size: .94rem; font-weight: 600; }
    .hero-role-title, .hero-role-meta { display: inline; font-size: inherit; font-weight: inherit; color: inherit; }
    .hero-role-meta::before { content: " | "; color: var(--muted); font-weight: 500; }
    .hero .contact-actions { display: flex; grid-area: contact; align-self: start; }
    .page-index { order: 2; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; gap: 4px; min-block-size: 48px; margin: 0 0 14px; padding: 4px; background: color-mix(in srgb, var(--surface-2) 92%, var(--surface)); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm); backdrop-filter: blur(12px); }
    .page-index a { font-size: .88rem; }
    .page-index a.is-current { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
    .overview-band { order: 3; margin-bottom: var(--space-3); padding-bottom: var(--space-5); border-bottom: 1px solid var(--hairline); }
    .hero-panels { padding: 0; border: 0; }
    .lead-grid { gap: 14px; }
    #domains { order: 5; }
    #expertise { order: 6; }
    #systems { order: 7; }
    #career { order: 8; }
    #foundation { order: 9; }
    .contact-section { order: 10; }
    .lead-grid article > span { font-size: 1rem; }
    .lead-grid article p { font-size: .9rem; }
    .signal-grid dt { font-size: .68rem; }
    .signal-grid dd { padding: 13px 16px 15px; font-size: .9rem; }
    .section-block { padding: 40px 0; }
    .section-heading { grid-template-columns: minmax(0, 1fr) max-content; align-items: end; margin-bottom: 18px; }
    .section-heading h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
    .section-heading span { font-size: .64rem; }
    .domain-list span { min-block-size: var(--touch); padding: 0 14px; font-size: .88rem; border-radius: var(--radius); }
    .expertise-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .expertise-grid article { display: flex; flex-direction: column; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; }
    .expertise-grid article > span { display: flex; align-items: center; min-block-size: var(--card-head-h); padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); font-size: .96rem; }
    .expertise-grid article p { padding: 12px 14px 14px; font-size: .9rem; color: var(--text); margin: 0; }
    .systems-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .systems-columns article { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; }
    .systems-details summary { min-block-size: var(--card-head-h); padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); cursor: default; pointer-events: none; }
    .systems-details summary::after { display: none; }
    .systems-summary { font-size: .96rem; }
    .systems-columns ul { padding: 12px 14px 14px; gap: 7px; }
    .systems-columns li, .foundation-list li { font-size: .9rem; padding-left: 18px; }
    .timeline-meta { grid-template-columns: max-content minmax(0, 1fr) max-content max-content; gap: 10px 18px; align-items: center; }
    .timeline-date { white-space: nowrap; }
    .timeline-company { white-space: nowrap; }
    .timeline-location { white-space: nowrap; }
    .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
    .detail-grid article { display: flex; flex-direction: column; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; block-size: 100%; }
    .detail-grid article > span { display: flex; align-items: center; min-block-size: var(--card-head-h); padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); font-size: .66rem; }
    .detail-grid strong { display: block; padding: 12px 14px 0; font-size: .92rem; }
    .detail-grid strong:last-child { padding-bottom: 14px; }
    .detail-grid small { display: block; padding: 4px 14px 14px; }
    .foundation-list { padding: 12px 14px 14px; gap: 7px; }
    .contact-links { display: flex; flex-wrap: wrap; }
    .contact-links > a, .contact-links > .contact-actions, .contact-links .chip { inline-size: auto; }
}
@media (min-width: 1024px) {
    :root { --overview-gap: 40px; }
    .hero h1 { font-size: clamp(3.2rem, 6vw, 5.8rem); }
    .expertise-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .expertise-grid article { min-block-size: 160px; }
    .expertise-grid article p { flex: 1 1 auto; }
    .section-block { padding: 46px 0; }
}
@media (min-width: 1120px) {
    .expertise-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .expertise-grid article { min-block-size: 172px; }
    .systems-columns { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .chip, .contact-actions button, .contact-links a, .domain-list span, .page-index a { transition: none; }
}