/* Lokalni pisavi: stran nima zunanjih zahtev za pisave ali sledilnikov. */
@font-face {
  font-family: 'Bodoni Moda'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('./fonts/bodoni-moda-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;
}
@font-face {
  font-family: 'Bodoni Moda'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('./fonts/bodoni-moda-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;
}
@font-face {
  font-family: 'Bodoni Moda'; font-style: italic; font-weight: 400 900; font-display: swap;
  src: url('./fonts/bodoni-moda-latin-italic.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;
}
@font-face {
  font-family: 'DM Sans'; font-style: normal; font-weight: 100 1000; font-display: swap;
  src: url('./fonts/dm-sans-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;
}
@font-face {
  font-family: 'DM Sans'; font-style: normal; font-weight: 100 1000; font-display: swap;
  src: url('./fonts/dm-sans-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;
}

:root {
  --ivory: #F8F4EF;
  --blush: #E8D5D8;
  --rose: #B98497;
  --plum: #6A4655;
  --charcoal: #302B2D;
  color: var(--charcoal);
  background: var(--ivory);
  font-family: 'DM Sans', sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; }
::selection { color: var(--charcoal); background: var(--blush); }
:focus-visible { outline: 2px solid var(--plum); outline-offset: 8px; }
main { min-height: 100svh; display: grid; place-items: center; padding: 48px 24px; }
.composition { width: min(820px, 100%); }
h1 { margin: 0; font-family: 'Bodoni Moda', Georgia, serif; font-weight: 400; font-size: clamp(68px, 19vw, 230px); line-height: 0.96; letter-spacing: -0.065em; }
.title-line { display: block; width: fit-content; }
h1 em { margin-left: 16%; padding-bottom: 0.1em; color: var(--plum); font-weight: 400; animation-delay: 100ms; }
.linkedin-link { display: flex; align-items: center; justify-content: space-between; width: fit-content; min-height: 44px; gap: 32px; margin: clamp(32px, 6vh, 64px) auto 0; border-bottom: 1px solid var(--rose); color: var(--plum); font-size: 13px; text-decoration: none; animation-delay: 200ms; -webkit-tap-highlight-color: transparent; }
.linkedin-link > span { font-size: 21px; line-height: 1; transition: transform 200ms ease; }
.linkedin-link:hover > span { transform: translate(3px, -3px); }
.linkedin-link:hover { border-color: var(--plum); }

@media (max-width: 700px) {
  .composition { width: min(470px, 100%); }
  h1 { font-size: clamp(60px, 24vw, 145px); }
}
@media (prefers-reduced-motion: no-preference) {
  .reveal { animation-name: arrive; animation-duration: 850ms; animation-timing-function: cubic-bezier(0.22,1,0.36,1); animation-fill-mode: backwards; }
  @keyframes arrive { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}