/* ─────────────────────────────────────────────────────────────
   Fontovi sa sopstvenog servera.
   Ranije su se povlačili sa fonts.googleapis.com: strano poreklo znači
   zaseban DNS upit i TLS rukovanje pre nego što se sazna i ime fajla —
   279 ms samo na CSS, pa tek onda fontovi. Ovako idu sa istog servera
   kao strana i kreću odmah.
   ───────────────────────────────────────────────────────────── */

/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-400-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-400-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/newsreader-400-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/newsreader-400-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --paper: #faf9f7;
    --ink: #1c1d1f;
    --ink-soft: #4a4d52;
    --ink-faint: #8a8d93;
    --accent: #19527d;
    --rule: #e4e1db;
    --serif: "Newsreader", Georgia, serif;
    --sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
    --mono: "IBM Plex Mono", "SF Mono", Menlo, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 16px; }

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: #fff; }

a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    transition: border-color .15s ease;
}
a:hover { border-bottom-color: var(--accent); }

.page {
    max-width: 720px;
    margin: 0 auto;
    padding: 72px 28px 48px;
    animation: rise .5s ease-out both;
}

/* Bez opacity: dok je sadržaj providan, Chrome ga ne broji kao iscrtan,
   pa je merenje brzine vraćalo NO_FCP umesto ocene. Pomeranje ostaje. */
@keyframes rise {
    from { transform: translateY(8px); }
    to   { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .page { animation: none; }
}

/* ---- Actions ----------------------------------------------------- */

.actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
}

.actions .lang {
    margin-right: auto;
    display: flex;
    gap: 4px;
}

.actions .lang .active {
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 999px;
    padding: 6px 14px;
}

.actions a,
.actions button {
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    background: none;
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: 6px 14px;
    cursor: pointer;
    text-decoration: none;
    transition: color .15s ease, border-color .15s ease;
}

.actions a:hover,
.actions button:hover {
    color: var(--accent);
    border-color: var(--accent);
}

/* ---- Masthead ---------------------------------------------------- */

.masthead {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    padding-bottom: 36px;
    border-bottom: 2px solid var(--ink);
}

.kicker {
    font-family: var(--mono);
    font-size: .7rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 14px;
}

.masthead h1 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 2.9rem;
    line-height: 1.05;
    letter-spacing: -.01em;
}

.role {
    font-family: var(--serif);
    font-size: 1.15rem;
    font-style: italic;
    color: var(--ink-soft);
    margin-top: 8px;
}

.contact {
    list-style: none;
    margin-top: 18px;
    font-family: var(--mono);
    font-size: .78rem;
    color: var(--ink-soft);
}

.contact li { margin-bottom: 5px; }
.contact a { color: var(--ink-soft); border-bottom-color: var(--rule); }
.contact a:hover { color: var(--accent); }

.masthead-photo img {
    width: 112px;
    height: 112px;
    object-fit: cover;
    object-position: 50% 18%;
    border-radius: 50%;
    filter: grayscale(25%);
}

/* ---- Sections ---------------------------------------------------- */

section { padding: 32px 0; border-bottom: 1px solid var(--rule); }
section:last-of-type { border-bottom: none; }

.section-label {
    font-family: var(--mono);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 18px;
}

.lede {
    font-family: var(--serif);
    font-size: 1.18rem;
    line-height: 1.65;
    color: var(--ink);
}

p { color: var(--ink-soft); font-size: .95rem; }

/* ---- Lists ------------------------------------------------------- */

.plain-list {
    list-style: none;
    color: var(--ink-soft);
    font-size: .95rem;
}
.plain-list li {
    padding-left: 1.4em;
    position: relative;
    margin-bottom: 10px;
}
.plain-list li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--accent);
}

/* ---- Experience entries ------------------------------------------ */

.entry { margin-bottom: 28px; }
.entry:last-child { margin-bottom: 0; }

.entry-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
}

.entry h3 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.18rem;
    line-height: 1.3;
}

.period {
    font-family: var(--mono);
    font-size: .75rem;
    color: var(--ink-faint);
    white-space: nowrap;
}

.entry-sub {
    font-family: var(--mono);
    font-size: .75rem;
    color: var(--accent);
    margin: 2px 0 8px;
}

.entry p:not(.entry-sub):not(.period) { margin-top: 6px; }

/* ---- Skills ------------------------------------------------------ */

.skills { display: grid; gap: 14px; }

.skill-row {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 16px;
    align-items: baseline;
}

.skill-row dt {
    font-family: var(--mono);
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink);
    font-weight: 500;
}

.skill-row dd { color: var(--ink-soft); font-size: .92rem; }

/* ---- Footer ------------------------------------------------------ */

.footer {
    padding-top: 28px;
    text-align: center;
}
.footer p {
    font-family: var(--mono);
    font-size: .72rem;
    color: var(--ink-faint);
}

/* ---- Responsive -------------------------------------------------- */

@media (max-width: 600px) {
    .page { padding: 44px 20px 36px; }
    .masthead { flex-direction: column-reverse; }
    .masthead h1 { font-size: 2.2rem; }
    .masthead-photo img { width: 88px; height: 88px; }
    .skill-row { grid-template-columns: 1fr; gap: 2px; }
}

/* ---- Print ------------------------------------------------------- */

@media print {
    :root { --paper: #fff; }
    .actions { display: none; }
    .page { max-width: none; padding: 0; animation: none; }
    a { color: var(--ink); border-bottom: none; }
    section { padding: 18px 0; break-inside: avoid; }
    .masthead { padding-bottom: 20px; }
    .masthead-photo img { filter: none; }
}