/* ==========================================================================
   cv.ggeorgiev.info
   Black page · orange type · every link white (all states).
   No images, no third-party requests: typography + CSS only.
   ========================================================================== */

:root {
  --bg: #050505;
  --fg: #ff7a1a;            /* orange text */
  --dim: #cc6a1c;           /* secondary text, ≥ 5:1 on --bg */
  --faint: #7a4210;         /* ornaments */
  --line: rgba(255, 122, 26, .24);
  --white: #fff;

  --serif: "Playfair Display", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: "Instrument Sans", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;

  --h-size: clamp(2.34rem, min(6.66vw, 12.6vh), 7.2rem);   /* big headings: the name on the home page and every page title */
  --pad: clamp(20px, 9vw, 150px);   /* page side padding */
  --indent: clamp(0px, 14vw, 200px);/* content indent, like the reference */
  color-scheme: dark;
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg);
  scrollbar-gutter: stable;   /* keep the scrollbar's space on every page, so the layout doesn't shift between short (home) and long pages */
}
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font: 400 1rem/1.7 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-kerning: normal; hanging-punctuation: first;
  overflow-x: hidden;
}
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
::selection { background: var(--fg); color: #000; }

/* soft ember glow in the corner + film-grain-free depth */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vmax 40vmax at 100% -10%, rgba(255, 122, 26, .10), transparent 65%),
    radial-gradient(50vmax 30vmax at -10% 110%, rgba(255, 122, 26, .05), transparent 65%);
}

/* scroll progress hairline (pure CSS, where supported) */
@supports (animation-timeline: scroll()) {
  body::after {
    content: ""; position: fixed; left: 0; top: 0; height: 2px; width: 100%; z-index: 60;
    background: var(--fg); transform-origin: 0 50%;
    animation: progress linear both; animation-timeline: scroll(root);
  }
  @keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* smooth cross-page fade (multi-page view transitions) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }
.head { view-transition-name: head; }
.mark { view-transition-name: mark; }

/* ==========================================================================
   LINKS — always white. link · visited · hover · focus · active
   State is shown by the underline, never by colour.
   ========================================================================== */
a, a:link, a:visited, a:hover, a:focus, a:focus-visible, a:active,
button.linklike, [data-print], [data-reveal] {
  color: var(--white);
}
a, [data-print], [data-reveal] {
  text-decoration-line: underline;
  text-decoration-color: var(--fg);
  text-decoration-thickness: 1px;
  text-underline-offset: .28em;
  transition: text-decoration-thickness .18s, text-underline-offset .18s, text-decoration-color .18s;
}
a:hover, a:focus-visible, [data-print]:hover, [data-print]:focus-visible, [data-reveal]:hover, [data-reveal]:focus-visible {
  text-decoration-thickness: 2px;
  text-underline-offset: .42em;
  text-decoration-color: var(--white);
}
a:active { text-decoration-thickness: 3px; }
a:focus-visible, [data-print]:focus-visible, [data-reveal]:focus-visible { outline: 2px solid var(--white); outline-offset: 5px; border-radius: 2px; }
[data-print], [data-reveal] {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; letter-spacing: inherit;
}

/* ==========================================================================
   Header
   ========================================================================== */
.head {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: baseline; gap: 2rem;
  padding: 30px calc(var(--pad) + 110px) 34px var(--pad);
  background: linear-gradient(var(--bg) 62%, rgba(5, 5, 5, 0));
}
.nav { display: flex; flex-wrap: wrap; gap: .35rem 2.6rem; font-size: .9rem; letter-spacing: .03em; }
.nav a { text-decoration-line: none; padding-block: .15rem; }
.nav a:hover, .nav a:focus-visible { text-decoration-line: underline; }
.nav a[aria-current="page"] {
  text-decoration-line: underline; text-decoration-color: var(--fg); text-decoration-thickness: 2px; text-underline-offset: .5em;
}
.switch { margin-left: auto; font-size: .9rem; letter-spacing: .06em; text-transform: lowercase; }
.switch a { text-decoration-line: none; padding: .25rem .6rem; border: 1px solid var(--line); border-radius: 999px; transition: border-color .2s; }
.switch a:hover, .switch a:focus-visible { border-color: var(--white); text-decoration-line: none; }

/* top-right cross + vertical wordmark */
.mark {
  position: fixed; top: 26px; right: var(--pad); z-index: 55;   /* above the sticky header so the cross stays clickable */
  display: flex; align-items: flex-start; gap: 1.6rem;
  color: var(--fg); pointer-events: none;           /* only the cross is clickable */
}
.mark__x {
  pointer-events: auto; display: grid; place-items: center; margin: -8px; padding: 8px; border-radius: 50%;
  text-decoration: none;                             /* colour stays white via the global link rule */
}
.mark__x svg { display: block; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.mark__x:hover svg, .mark__x:focus-visible svg { transform: rotate(90deg) scale(1.15); }
.mark__x:active svg { transform: rotate(90deg) scale(.9); }
.mark__word { writing-mode: vertical-rl; font: 400 1.7rem/1 var(--serif); letter-spacing: .02em; margin-top: 4px; user-select: none; }

/* ==========================================================================
   Page shell
   ========================================================================== */
.main { flex: 1; padding: 2vh var(--pad) 8vh; }

.title {
  font: 400 var(--h-size)/.98 var(--serif);   /* same size as the name on the home page */
  overflow-wrap: break-word;
  letter-spacing: -.035em; text-transform: lowercase;
  margin: 4vh 0 .35em -.04em;
  color: var(--fg);
  animation: rise .9s cubic-bezier(.2, .7, .2, 1) both;
}
.title--sm { font-size: calc(var(--h-size) * .8); margin-top: 9vh; }
.body { margin-left: var(--indent); max-width: 54rem; animation: rise 1s cubic-bezier(.2, .7, .2, 1) .12s both; }

@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

.kicker {
  font-size: .8rem; letter-spacing: .14em; text-transform: lowercase; color: var(--dim);
  margin-bottom: 2.2rem;
}
.kicker i, .row__meta i, .quote figcaption i { font-style: normal; color: var(--faint); margin-inline: .7em; }

.statement {
  font: 400 clamp(1.45rem, 2.9vw, 2.2rem)/1.25 var(--serif);
  letter-spacing: -.012em; margin-bottom: 1.4em; text-wrap: pretty;
}
.prose { font-size: 1.05rem; line-height: 1.8; margin-bottom: 1.2rem; text-wrap: pretty; }

/* justified running text (two-sided alignment); words are never broken or hyphenated */
.statement, .prose, .dash li, .quote blockquote p {
  text-align: justify; text-justify: inter-word; text-align-last: left;
  hyphens: none; -webkit-hyphens: none;
}
.label { font: 500 .74rem/1.4 var(--sans); letter-spacing: .18em; text-transform: lowercase; color: var(--dim); margin-bottom: 1.1rem; }

/* about — numbers */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 2rem 1.6rem; margin-top: 3.4rem; padding: 2rem 0 2.2rem; border-block: 1px solid var(--line); }
.stats dt { font: 400 clamp(2.6rem, 5vw, 3.8rem)/1 var(--serif); letter-spacing: -.03em; }
.stats dd { margin-top: .6rem; font-size: .85rem; line-height: 1.45; color: var(--dim); max-width: 18ch; }

.aside { margin-top: 4rem; }

.actions { display: flex; flex-wrap: wrap; gap: .9rem 2.4rem; margin-top: 3.4rem; font-size: 1.02rem; }

/* experience / education rows */
.row { padding: 2.1rem 0 2rem; border-top: 1px solid var(--line); }
.row:last-of-type { border-bottom: 1px solid var(--line); }
.row__title { font: 400 clamp(1.7rem, 3.2vw, 2.4rem)/1.15 var(--serif); letter-spacing: -.015em; }
.row__meta { margin-top: .55rem; font-size: .9rem; letter-spacing: .02em; color: var(--dim); }
.row--now .row__title::after {
  content: ""; display: inline-block; width: .34em; height: .34em; margin-left: .55em; vertical-align: .32em;
  border-radius: 50%; background: var(--white); box-shadow: 0 0 0 0 rgba(255, 255, 255, .6);
  animation: pulse 2.6s ease-out infinite;
}
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); } 70%, 100% { box-shadow: 0 0 0 .7em rgba(255, 255, 255, 0); } }

/* the word "Present" / "Сега" inside a period (wrapped by pages.php) is white, like the pulsing dot */
.row__meta .now { color: var(--white); }
.row--earlier .row__title { opacity: .82; }
.dash { margin-top: 1.3rem; display: grid; gap: .6rem; }
.dash li { position: relative; padding-left: 1.7rem; line-height: 1.65; text-wrap: pretty; }
.dash li::before { content: ""; position: absolute; left: 0; top: .82em; width: .9rem; height: 1px; background: var(--dim); }
.row__tags { margin-top: 1.3rem; font-size: .78rem; letter-spacing: .1em; text-transform: lowercase; color: var(--dim); }
/* several roles under one employer (LinkedIn-style grouping) */
.positions { margin-top: 1.5rem; display: grid; gap: 2rem; }
.pos { padding-left: 1.4rem; border-left: 1px solid var(--line); }
.pos__role { font: 400 clamp(1.2rem, 2.1vw, 1.55rem)/1.25 var(--serif); letter-spacing: -.01em; }
.pos .row__meta { margin-top: .4rem; }
.pos--earlier .pos__role { opacity: .82; }
.pos--now .pos__role::after {
  content: ""; display: inline-block; width: .34em; height: .34em; margin-left: .55em; vertical-align: .3em;
  border-radius: 50%; background: var(--white); animation: pulse 2.6s ease-out infinite;
}

/* languages */
.lang { margin-top: 1.2rem; max-width: 28rem; }
.lang__head { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; margin-bottom: .55rem; }
.lang__head strong { font: 400 1.35rem/1.2 var(--serif); }
.lang__head span { font-size: .85rem; color: var(--dim); text-align: right; }
.bar { height: 1px; background: var(--line); position: relative; }
.bar span { position: absolute; left: 0; top: -1px; height: 3px; background: var(--fg); transform-origin: 0 50%; animation: grow 1.4s cubic-bezier(.2, .7, .2, 1) .4s both; }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* skills */
.skillrow { padding: 1.9rem 0 1.7rem; border-top: 1px solid var(--line); }
.skillrow:last-of-type { border-bottom: 1px solid var(--line); }
.words { display: flex; flex-wrap: wrap; gap: .25rem 0; font: 400 clamp(1.3rem, 2.4vw, 1.75rem)/1.35 var(--serif); letter-spacing: -.01em; }
.words li:not(:last-child)::after { content: "/"; margin-inline: .7em; color: var(--faint); }

/* recommendations */
.quote { margin-bottom: 3.6rem; padding-left: 1.6rem; border-left: 1px solid var(--fg); }
.quote blockquote p { font: 400 clamp(1.3rem, 2.5vw, 1.85rem)/1.32 var(--serif); letter-spacing: -.01em; text-wrap: pretty; }
.quote figcaption { margin-top: 1.4rem; display: flex; flex-direction: column; gap: .1rem; font-size: .88rem; color: var(--dim); }
.quote figcaption strong { color: var(--fg); font-weight: 600; letter-spacing: .02em; }
.letters li { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.letters li:last-child { border-bottom: 1px solid var(--line); }
.letters__who { display: flex; flex-direction: column; min-width: 0; }
.letters__who strong { font: 400 1.3rem/1.25 var(--serif); }
.letters__who em { font-style: normal; font-size: .85rem; color: var(--dim); }
.letters a, .off { white-space: nowrap; font-size: .9rem; }
.off { color: var(--dim); }

/* contact */
.contact { margin-top: 2.6rem; }
.contact li { display: grid; gap: .4rem; padding: 1.7rem 0 1.6rem; border-top: 1px solid var(--line); }
.contact li:last-child { border-bottom: 1px solid var(--line); }
.contact .label { margin: 0; }
.contact a, .contact .reveal { font: 400 clamp(1.2rem, 4.6vw, 3.1rem)/1.1 var(--serif); letter-spacing: -.02em; overflow-wrap: anywhere; justify-self: start; text-align: left; }

/* protected contacts: a "show" button until clicked (needs JavaScript; without it a short note is shown) */
.contact .reveal { display: none; text-decoration-style: dotted; }
.js .contact .reveal { display: inline-block; }
.nojs { color: var(--dim); font-size: .95rem; }
.js .nojs { display: none; }

.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }   /* robot trap in the contact page */
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* one-page CV view */
.cv-all__sec + .cv-all__sec { margin-top: 12vh; }

/* ==========================================================================
   Footer
   ========================================================================== */
.foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 2rem;
  padding: 1.8rem var(--pad) 2.2rem; border-top: 1px solid var(--line);
  font-size: .82rem; color: var(--dim);
}
.foot p { display: flex; flex-wrap: wrap; gap: .3rem 1.6rem; }

/* ==========================================================================
   Home — language chooser
   ========================================================================== */
.home { flex: 1; display: grid; align-items: center; padding: 9vh var(--pad) 6vh; }
.home__in { max-width: 62rem; }
.home__name {
  /* the name is shown exactly as written in data/home.json (capitals stay capitals) */
  font: 400 var(--h-size)/1 var(--serif); letter-spacing: -.02em;
  margin: 0 0 0 -.03em;
}
@media (min-width: 761px) { .home__name { white-space: nowrap; } }
.home__role { margin-top: 1.6rem; font: 400 clamp(1.05rem, 2vw, 1.4rem)/1.35 var(--serif); }
.home__tag { margin-top: .9rem; color: var(--dim); font-size: .95rem; }

/* Identity block: the Bulgarian and English versions sit on top of each other in ONE grid cell and
   take turns fading in and out. The cell is as tall as the taller version, so nothing ever jumps.
   Cycle = 2 × --swap (set from data/home.json → swap_seconds). */
.swap { display: grid; }
.swap__p { grid-area: 1 / 1; opacity: 0; animation: swap calc(var(--swap, 7s) * 2) ease-in-out infinite both; }
.swap__p--en { animation-delay: var(--swap, 7s); }
/* One language's slot is half the cycle (= --swap): blank 10% · fade in 12% · hold 66% · fade out 12%.
   The English copy starts exactly one slot later, so every switch — and the very first appearance at
   time zero — has the same blank pause before the next text starts to fade in. */
@keyframes swap {
  0%     { opacity: 0; transform: translateY(8px); }
  5%     { opacity: 0; transform: translateY(8px); }
  11%    { opacity: 1; transform: none; }
  44%    { opacity: 1; transform: none; }
  50%    { opacity: 0; transform: translateY(-6px); }
  100%   { opacity: 0; transform: translateY(-6px); }
}
/* alternation switched off (swap_seconds: 0, a single language, or reduced motion): show everything, stacked */
.swap--off { display: block; }
.swap--off .swap__p { opacity: 1; animation: none; transform: none; }
.swap--off .swap__p + .swap__p { margin-top: 2rem; }
/* language links: two quiet rows; the link is the white underlined word, the description is plain text */
.choose { margin-top: 2.4rem; max-width: 34rem; animation: rise 1s .26s both; }
.choose .label { margin-bottom: .7rem; }
.choose li {
  display: flex; align-items: baseline; justify-content: space-between; gap: .4rem 1.5rem; flex-wrap: wrap;
  padding: .95rem 0 .9rem; border-top: 1px solid var(--line);
  transition: border-color .2s;
}
.choose li:hover, .choose li:focus-within { border-color: var(--white); }
.choose a { font: 400 clamp(1.3rem, 2.3vw, 1.6rem)/1.2 var(--serif); letter-spacing: -.01em; }
.choose a span { display: inline-block; transition: transform .25s; }
.choose a:hover span, .choose a:focus-visible span { transform: translateX(5px); }
.choose__sub { font-size: .85rem; color: var(--dim); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .mark__word { display: none; }                     /* on smaller screens only the cross (home link) stays */
  .mark { top: 18px; }
  .head { padding-right: calc(var(--pad) + 44px); }
}
@media (max-width: 760px) {
  :root { --indent: 0px; }
  .head { flex-wrap: wrap; gap: .8rem 1rem; padding-top: 20px; padding-bottom: 22px; }
  .nav { gap: .3rem 1.3rem; font-size: .86rem; flex: 1 1 100%; order: 2; }
  .switch { order: 1; margin-left: 0; }
  .title { margin-top: 2vh; }
  .letters li { flex-direction: column; gap: .3rem; }
  .foot { flex-direction: column; }
}
/* phones: narrow columns + justified text = huge gaps between words, so read left-aligned there */
@media (max-width: 600px) {
  .statement, .prose, .dash li, .quote blockquote p { text-align: left; }
}
/* small phones: each language link and its description on their own lines, always the same shape */
@media (max-width: 480px) {
  .choose li { flex-direction: column; align-items: flex-start; gap: .2rem; }
}
/* phone held sideways: the screen is short, so don't let the header take a third of it */
@media (max-height: 520px) and (orientation: landscape) {
  .head { position: static; padding-top: 16px; padding-bottom: 14px; }
  .title { margin-top: 1vh; }
  .title--sm { margin-top: 4vh; }
  .main { padding-bottom: 5vh; }
  .home { padding-top: 6vh; padding-bottom: 4vh; }
  .home__role { margin-top: 1rem; }
  .choose { margin-top: 1.4rem; }
}

/* ==========================================================================
   Motion preferences
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  @view-transition { navigation: none; }
  /* no fading for people who asked for less motion: show both languages, stacked */
  .swap { display: block; }
  .swap__p { opacity: 1 !important; transform: none !important; }
  .swap__p + .swap__p { margin-top: 2rem; }
}

/* ==========================================================================
   Print / save as PDF — clean black-on-white CV
   ========================================================================== */
@media print {
  @page { margin: 14mm 15mm; }
  :root { --bg: #fff; --fg: #111; --dim: #444; --faint: #888; --line: #bbb; --white: #000; --indent: 0px; --pad: 0px; }
  html, body { background: #fff; color: #111; }
  body { font-size: 10pt; line-height: 1.45; display: block; min-height: 0; }
  body::before, body::after, .mark, .head, .no-print, .reveal, .nojs, .foot p:last-child { display: none !important; }
  a, a:link, a:visited { color: #000; text-decoration: none; }
  .main { padding: 0; }
  .title, .title--sm { font-size: 22pt; margin: 14pt 0 6pt; animation: none; }
  .body { margin: 0; max-width: none; animation: none; }
  .statement { font-size: 13pt; }
  .row, .skillrow, .quote, .letters li { break-inside: avoid; }
  .row { padding: 8pt 0; }
  .row__title { font-size: 13pt; }
  .stats dt { font-size: 20pt; }
  .words { font-size: 11pt; }
  .quote blockquote p { font-size: 11pt; }
  .contact a { font-size: 13pt; }
  .cv-all__sec + .cv-all__sec { margin-top: 10pt; }
  .bar span { animation: none; }
  .foot { padding: 8pt 0 0; border: 0; }
}