/* ============================================================
   Stefan Stojanović - Portfolio
   Aesthetic: conscious minimalism, B&W, generous negative space
   Type: Poppins (display) + Inter (body) - sans, after the PDF
   ============================================================ */

:root {
  --paper: #f7f7f7;     /* off-white (matches reference + PDF) */
  --ink: #101010;       /* near-black */
  --muted: #6b6b65;     /* secondary grey - darkened to meet WCAG AA (4.5:1) on paper */
  --line: #dcdbd5;      /* hairline */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pad: clamp(1.25rem, 4vw, 3.5rem);
  --display: "Poppins", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  cursor: none;
}
@media (max-width: 768px) { body { cursor: auto; } }

a { color: inherit; text-decoration: none; }

/* off-screen container that only holds the reusable <symbol> + <filter> defs */
.svg-defs { position: absolute; width: 0; height: 0; }

/* ---------- Custom cursor ---------- */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #fff;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width .35s var(--ease), height .35s var(--ease),
              background .35s var(--ease), opacity .3s;
  mix-blend-mode: difference;
}
.cursor.is-hover { width: 56px; height: 56px; background: #fff; }
@media (max-width: 768px) { .cursor { display: none; } }

/* ---------- Loader ---------- */
.loader {
  position: fixed;
  inset: 0;
  background: var(--paper);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}
.loader__id {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  text-align: center;
}
.loader__name {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  letter-spacing: -0.01em;
}
.loader__role {
  font-family: var(--body);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.loader__mark {
  position: relative;
  width: clamp(90px, 12vw, 150px);
  aspect-ratio: 83.58 / 83.17;
}
.mark {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  color: var(--ink);
}
.mark--ghost { opacity: 0.12; }
.mark--fill { clip-path: inset(100% 0 0 0); }  /* JS fills bottom→top */

.loader__count {
  position: absolute;
  bottom: var(--pad); right: var(--pad);
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(3rem, 12vw, 9rem);
  line-height: 1;
  display: flex;
  align-items: baseline;
  letter-spacing: -0.03em;
}
.loader__count i { font-size: .3em; font-style: normal; margin-left: .1em; color: var(--muted); }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--pad);
  mix-blend-mode: difference;
  color: #fff;
}
.brand { display: flex; align-items: center; gap: .5rem; margin-left: -0.35rem; }
.brand__mark { width: 18px; height: 18px; color: #fff; }
.brand__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.nav { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); }
.nav a { font-size: .9rem; letter-spacing: .01em; }

/* EN / SR language switch (sits in the header nav, next to Contact) */
.lang { display: inline-flex; align-items: center; gap: .3rem; }
.lang__opt {
  font-family: inherit; font-size: .82rem; letter-spacing: .06em;
  background: none; border: 0; padding: 0; color: inherit; cursor: pointer;
  opacity: .45; transition: opacity .25s var(--ease);
}
.lang__opt.is-active { opacity: 1; font-weight: 600; }
.lang__opt:hover { opacity: .8; }
.lang__sep { opacity: .3; font-size: .82rem; }
/* Lang options are now <a> (crawlable EN/SR links). ".nav a" (line 136) would
   otherwise out-specify ".lang__opt" and bump the font size, so restate the two
   conflicting props at a higher specificity to keep the switch pixel-identical. */
.nav .lang__opt { font-size: .82rem; letter-spacing: .06em; }

/* ---------- Touch targets: keep tappable areas >= 44px (WCAG / Apple HIG) ----------
   The text stays the same size; only the clickable box grows (centered), so the
   header look is unchanged while taps are reliable on touch devices. */
.nav a,
.lang__opt {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.lang__opt { padding-inline: .4rem; }
.chip,
.dl { min-height: 44px; }

/* ---------- Mobile header: drop the wordmark so the nav + EN/SR switch fit ----------
   The brand name + 3 nav links + EN/SR can't share one line on a phone (the
   SR option was being clipped off the right edge). Below 600px we keep just the
   monogram (still the home link) and let the nav own the right side. The hero
   shows the full name immediately, so nothing is lost. */
@media (max-width: 600px) {
  .brand__name { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--pad);
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  top: 50%; right: -12vw;
  transform: translateY(-50%);
  width: min(86vh, 70vw);
  aspect-ratio: 83.58 / 83.17;
  z-index: 0;
  pointer-events: none;
}
.hero__mark {
  width: 100%; height: 100%;
  color: var(--ink);
  opacity: 0.035;
  transform-origin: 50% 50%;
}
.hero__lockup { display: block; margin: 0; font-weight: inherit; }
.hero__name {
  display: block;
  position: relative;
  z-index: 1;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.1rem, 2.4vw, 1.9rem);
  letter-spacing: -0.01em;
  line-height: 1;
  margin-bottom: clamp(.6rem, 1.2vw, 1.1rem);
}
.hero__title {
  display: block;
  position: relative;
  z-index: 1;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2rem, 8.8vw, 8.5rem);
  line-height: 1.0;
  letter-spacing: -0.04em;
  white-space: nowrap;
}
.hero__title .line { display: block; overflow: hidden; padding-top: .16em; padding-bottom: .14em; }
.hero__title .line span { display: block; }

.hero__tagline {
  position: relative;
  z-index: 1;
  margin-top: clamp(.65rem, 1.5vw, 1.1rem);
  max-width: none;
  font-family: var(--display);
  font-weight: 500;
  color: var(--ink);
  font-size: clamp(1rem, 2.1vw, 1.65rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  white-space: nowrap;
}
@media (max-width: 600px) { .hero__tagline { white-space: normal; } }

.scroll-cue {
  position: absolute;
  bottom: var(--pad); left: var(--pad);
  z-index: 1;
  display: flex; align-items: center; gap: .75rem;
  font-size: .8rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--muted);
}
.scroll-cue i { width: 40px; height: 1px; background: var(--muted); position: relative; overflow: hidden; }
.scroll-cue i::after {
  content: ""; position: absolute; inset: 0; background: var(--ink);
  transform: translateX(-100%); animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue { 0%{transform:translateX(-100%)} 50%{transform:translateX(0)} 100%{transform:translateX(100%)} }

/* ---------- Sections shared ---------- */
section { padding: clamp(3.5rem, 8vw, 7rem) var(--pad); }

/* ---------- Intro (positioning statement under the hero) ---------- */
.intro { padding-top: clamp(.5rem, 1.5vw, 1rem); padding-bottom: clamp(.5rem, 1.5vw, 1rem); }
.intro__lead {
  max-width: 90ch;
  margin: 0 auto;
  text-align: center;
  text-wrap: balance;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.05rem, 2vw, 1.75rem);
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.about { padding-top: clamp(2rem, 4vw, 3.5rem); padding-bottom: clamp(1.5rem, 3vw, 2.75rem); }
.work { padding-top: clamp(1.75rem, 3.5vw, 3rem); padding-bottom: clamp(1.75rem, 3.5vw, 3rem); }
.section-label {
  font-size: .8rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--muted); margin-bottom: clamp(2rem, 5vw, 4rem);
}
.section-label span { color: var(--ink); }
.section-label::after { content: "↓"; margin-left: .6rem; display: inline-block; font-size: .95em; }

/* ---------- About ---------- */
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: start;
}
@media (max-width: 820px) {
  .about__grid { grid-template-columns: 1fr; }
  /* portrait would otherwise go full-bleed 4:5 and dominate the screen */
  .about__photo { max-width: 300px; }
}

.about__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  background: #e9e8e2;
  border: 1px solid var(--line);
}
.about__socials { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: 1px solid var(--ink);
  padding: .5rem .85rem;
  font-family: var(--display);
  font-weight: 500;
  font-size: .85rem;
  letter-spacing: -0.01em;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.chip small { font-family: var(--body); font-weight: 400; font-size: .7rem; color: var(--muted); }
.chip:hover { background: var(--ink); color: var(--paper); }
.chip:hover small { color: rgba(255,255,255,.6); }

.about__contacts { list-style: none; margin-top: 1.75rem; display: grid; gap: 1rem; }
.about__contacts li { display: grid; gap: .15rem; }
.about__contacts span { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.about__contacts a, .about__contacts p { font-size: .95rem; word-break: break-word; }

.about__lead {
  font-size: clamp(1.05rem, 2vw, 1.75rem);
  line-height: 1.3;
  text-align: justify;
  margin-bottom: clamp(1rem, 2.5vw, 1.75rem);
}
.about__lead strong { font-weight: 600; }
.about__block { margin-bottom: clamp(2rem, 4vw, 3rem); }
.about__h {
  font-family: var(--body);
  font-weight: 500;
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
  padding-bottom: .65rem;
  border-bottom: 1px solid var(--line);
}

.tag-list { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem .65rem; }
.tag-list li {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1rem, 2vw, 1.35rem); letter-spacing: -0.01em;
}
.tag-list li:not(:last-child)::after { content: "·"; margin-left: .65rem; color: var(--muted); }
.tag-list--muted li { font-family: var(--body); font-weight: 400; font-size: .95rem; color: var(--muted); }

.timeline { list-style: none; display: grid; gap: .9rem; }
.timeline li {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  gap: 1rem;
  align-items: baseline;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--line);
}
.timeline__yr { font-size: .85rem; color: var(--muted); }
.timeline__role { font-family: var(--display); font-weight: 500; font-size: clamp(1rem, 1.8vw, 1.25rem); }
.timeline__org { font-size: .85rem; color: var(--muted); justify-self: end; text-align: right; }
@media (max-width: 560px) {
  /* role drops above org; tighten the vertical gap between them (keep the
     year -> role column gap at 1rem via column-gap) */
  .timeline li { grid-template-columns: 4.5rem 1fr; row-gap: .2rem; }
  .timeline__org { grid-column: 2; justify-self: start; text-align: left; }
}

/* ---------- Work ---------- */
.work__list { list-style: none; border-top: 1px solid var(--line); }
.work__item {
  display: grid;
  grid-template-columns: 4rem 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: clamp(1.1rem, 2.6vw, 2rem) 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left .5s var(--ease);
}
.work__item:hover { padding-left: 1.5rem; }
.work__num { font-size: .85rem; color: var(--muted); }
.work__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.6rem, 5vw, 3.4rem);
  letter-spacing: -0.03em;
  transition: opacity .4s var(--ease);
}
.work__tag { font-size: .85rem; color: var(--muted); justify-self: end; text-align: right; }
.work__list:hover .work__item:not(:hover) .work__name { opacity: .3; }

/* ---------- Contact ---------- */
.contact { display: flex; flex-direction: column; justify-content: flex-start; padding-top: clamp(1.75rem, 3.5vw, 3rem); padding-bottom: clamp(2rem, 4vw, 3.25rem); }
.contact__mail {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.5rem, 6.5vw, 5rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  word-break: break-word;
  position: relative;
  display: inline-block;
}
.contact__mail::after {
  content: ""; position: absolute; left: 0; bottom: .06em;
  width: 100%; height: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease);
}
.contact__mail:hover::after { transform: scaleX(1); }
/* mobile: keep the long email on ONE line (it was wrapping to two). Placed after
   the base .contact__mail so this font-size wins; fluid size fits down to ~320px. */
@media (max-width: 600px) {
  .contact__mail { white-space: nowrap; font-size: clamp(.95rem, 4.7vw, 1.5rem); }
}
.contact__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
}
.contact__socials { display: flex; gap: 2rem; }
.contact__downloads { display: flex; gap: 1rem; flex-wrap: wrap; }
.dl {
  display: inline-flex;
  align-items: baseline;
  gap: .55rem;
  border: 1px solid var(--ink);
  padding: .8rem 1.2rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
  transition: background .35s var(--ease), color .35s var(--ease);
}
.dl small { font-family: var(--body); font-weight: 400; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dl:hover { background: var(--ink); color: var(--paper); }
.dl:hover small { color: rgba(255,255,255,.6); }
.contact__socials a { font-size: .9rem; position: relative; }
.contact__socials a::after {
  content: ""; position: absolute; left: 0; bottom: -3px;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.contact__socials a:hover::after { transform: scaleX(1); }

/* ---------- Footer ---------- */
.site-footer {
  display: flex; justify-content: space-between;
  padding: var(--pad);
  border-top: 1px solid var(--line);
  font-size: .8rem; color: var(--muted);
}

/* ---------- Reveal base state ---------- */
.reveal { opacity: 0; transform: translateY(24px); }

/* ============================================================
   Work panel (seamless overlay - e.g. Logo Design)
   ============================================================ */
body.panel-open { overflow: hidden; }

.panel {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--paper);
  overflow-y: auto;
  overflow-x: hidden;
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  transition: transform .7s var(--ease), opacity .5s var(--ease), visibility 0s linear .7s;
}
.panel.is-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform .7s var(--ease), opacity .5s var(--ease);
}

.panel__bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--pad);
  background: var(--paper);
}
.panel__brand { display: inline-flex; align-items: center; font-family: var(--display); font-weight: 700; font-size: clamp(1rem, 1.6vw, 1.2rem); letter-spacing: -0.015em; }
.panel__brand .brand__mark { width: 18px; height: 18px; color: var(--ink); margin-right: .9rem; }
.panel__close {
  display: inline-flex; align-items: baseline; gap: .4rem;
  background: none; border: 1px solid var(--ink); color: var(--ink);
  cursor: none; padding: .5rem .85rem;
  font-family: var(--display); font-weight: 600; font-size: .9rem; letter-spacing: -0.01em;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.panel__close small { font-family: var(--body); font-weight: 400; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.panel__close:hover { background: var(--ink); color: var(--paper); }
.panel__close:hover small { color: rgba(255,255,255,.6); }
@media (max-width: 768px) { .panel__close { cursor: pointer; } }

.panel__inner { max-width: 1500px; margin: 0 auto; padding: 0 var(--pad) clamp(4rem, 8vw, 8rem); }

/* intro */
.lintro { text-align: center; padding: clamp(1rem, 3vw, 2.5rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.lintro__title {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.5rem, 9vw, 7.5rem);
  line-height: .95; letter-spacing: -0.04em;
}
.lintro__title .sub {
  display: block;
  font-weight: 600;
  font-size: clamp(.9rem, 1.8vw, 1.4rem);
  letter-spacing: .02em;
  color: var(--muted);
  margin-top: clamp(.6rem, 1.5vw, 1.1rem);
}
.lintro__text em { font-style: italic; }
.lintro__text {
  margin: clamp(2.5rem, 5vw, 4.5rem) auto 0;
  max-width: 62ch;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.65;
}
.panel__divider { height: 2px; background: var(--ink); margin: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(3rem, 6vw, 5rem); }

/* alternating blocks */
.lblock {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  padding: clamp(2.5rem, 6vw, 5.5rem) 0;
  border-bottom: 1px solid var(--line);
}
.lblock--rev .lblock__logo { order: -1; }
.lblock__name {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1.05; letter-spacing: -0.02em;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}
.lblock__num { color: var(--muted); font-weight: 500; margin-right: .4rem; }
.lblock__body { font-size: clamp(.95rem, 1.2vw, 1.05rem); line-height: 1.65; max-width: 54ch; text-align: justify; }
.lblock__body p + p { margin-top: 1rem; }
/* reversed blocks: text on the right aligns right */
.lblock--rev .lblock__text { text-align: right; }
.lblock--rev .lblock__body { margin-left: auto; text-align-last: right; }

.lblock__logo {
  border: 1px solid var(--ink);
  background: transparent;
  aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1.75rem, 5vw, 4rem);
}
.lblock__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
/* all logos except Etno (first) shrink 30% toward center */
.lblock:not(:first-of-type) .lblock__logo img { max-width: 70%; max-height: 70%; }
/* per-logo fine-tuning: MS -20% and Atika -30% relative to the 70% base */
.lblock:not(:first-of-type) .lblock__logo img[src*="ms-high-fidelity"] { max-width: 56%; max-height: 56%; }
.lblock:not(:first-of-type) .lblock__logo img[src*="atika"] { max-width: 49%; max-height: 49%; }

@media (max-width: 760px) {
  .lblock { grid-template-columns: 1fr; gap: 1.75rem; }
  .lblock--rev .lblock__logo { order: 0; }
}

/* additional logo work */
.ladditional { text-align: center; padding-top: clamp(3rem, 6vw, 5rem); }
.ladditional__h { font-family: var(--display); font-weight: 700; font-size: clamp(1.4rem, 3vw, 2.2rem); letter-spacing: -0.02em; }
.ladditional__p { max-width: 62ch; margin: 1rem auto clamp(2rem, 4vw, 3rem); color: var(--muted); }
.ladditional__img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
}

/* panel CTA (end of panel) */
.panel__cta {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 1.4rem;
  padding-top: clamp(4rem, 9vw, 7rem);
}
.panel__cta-label { font-size: .8rem; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.panel__mail {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.25rem, 4vw, 2.6rem);
  letter-spacing: -0.02em; word-break: break-word; line-height: 1.1;
  position: relative; display: inline-block;
}
.panel__mail::after {
  content: ""; position: absolute; left: 0; bottom: .04em;
  width: 100%; height: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease);
}
.panel__mail:hover::after { transform: scaleX(1); }
.panel__cta-socials { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; }
.panel__cta-socials a { font-size: .9rem; position: relative; }
.panel__cta-socials a::after {
  content: ""; position: absolute; left: 0; bottom: -3px;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.panel__cta-socials a:hover::after { transform: scaleX(1); }
.panel__cta-downloads { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.panel__back {
  margin-top: .75rem;
  background: none; border: 1px solid var(--ink); color: var(--ink); cursor: none;
  padding: .85rem 1.5rem;
  font-family: var(--display); font-weight: 600; font-size: 1rem; letter-spacing: -0.01em;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.panel__back:hover { background: var(--ink); color: var(--paper); }
@media (max-width: 768px) { .panel__back { cursor: pointer; } }

/* floating back-to-top / scroll button */
.fab {
  position: fixed;
  right: clamp(1rem, 3vw, 2.5rem);
  bottom: clamp(1rem, 3vw, 2.5rem);
  z-index: 2500;
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  cursor: none;
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: background .3s var(--ease), color .3s var(--ease), opacity .4s var(--ease), transform .4s var(--ease);
}
.fab.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.fab:hover { background: var(--ink); color: var(--paper); }
.fab__icon { width: 22px; height: 22px; transition: transform .45s var(--ease); transform: rotate(180deg); }
.fab.is-up .fab__icon { transform: rotate(0deg); }
@media (max-width: 768px) { .fab { cursor: pointer; } }

/* ============================================================
   Dark theme panel (Branding) - swaps the core color tokens
   ============================================================ */
.panel--dark {
  --paper: #0c0c0c;
  --ink: #f4f4f4;
  --line: #2b2b2b;
  --muted: #9a9a93;
  color: var(--ink);
}
/* fab inverts while a dark panel is open */
body.theme-dark .fab { background: #0c0c0c; border-color: rgba(255, 255, 255, .65); color: #fff; }
body.theme-dark .fab:hover { background: #fff; color: #0c0c0c; border-color: #fff; }

/* ---------- Branding media ---------- */
.bmedia { width: 100%; }
.bmedia--16x9 { aspect-ratio: 16 / 9; }
.bpair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 3vw, 2rem);
  margin-top: clamp(2rem, 5vw, 4rem);
}
@media (max-width: 640px) { .bpair { grid-template-columns: 1fr; } }

.bproject { margin-top: clamp(2.5rem, 5vw, 4rem); }
.bproject__name {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1.05; letter-spacing: -0.02em;
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.bproject__body { font-size: clamp(.95rem, 1.2vw, 1.1rem); line-height: 1.7; text-align: justify; }
.bproject__body p + p { margin-top: 1.1rem; }
.bproject__deliverables { color: var(--muted); }

.bcaption {
  text-align: center; color: var(--muted);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  margin: clamp(2.5rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem);
}

/* ---------- Gallery (clickable thumbs → lightbox) ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.75rem, 2vw, 1.25rem);
}
@media (max-width: 640px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
.gallery__item {
  aspect-ratio: 1 / 1;
  padding: 0; cursor: none; font: inherit;
  overflow: hidden;
  transition: opacity .3s var(--ease);
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery:hover .gallery__item:not(:hover) { opacity: .5; }
@media (max-width: 768px) { .gallery__item { cursor: pointer; } }

/* ---------- Lightbox (carousel) ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(8, 8, 8, .96);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease), visibility 0s linear .35s;
}
.lightbox.is-open { opacity: 1; visibility: visible; transition: opacity .35s var(--ease); }
.lightbox__stage { display: flex; align-items: center; justify-content: center; }
.lightbox__img { max-width: 86vw; max-height: 82vh; object-fit: contain; display: none; }
.lightbox__img.is-shown { display: block; }
.lightbox__ph {
  width: min(70vw, 900px); aspect-ratio: 4 / 3;
  background: #161616; border: 1px solid #333;
  display: flex; align-items: center; justify-content: center;
  color: #777; letter-spacing: .2em; font-size: .85rem;
}
.lightbox__ph.is-hidden { display: none; }
.lightbox__close, .lightbox__nav {
  position: fixed; z-index: 1;
  background: none; border: 1px solid rgba(255, 255, 255, .6); color: #fff;
  cursor: none;
  display: flex; align-items: center; justify-content: center;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.lightbox__close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); width: 46px; height: 46px; font-size: 1.05rem; }
.lightbox__nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 1.7rem; }
.lightbox__nav--prev { left: clamp(1rem, 3vw, 2.5rem); }
.lightbox__nav--next { right: clamp(1rem, 3vw, 2.5rem); }
.lightbox__close:hover, .lightbox__nav:hover { background: #fff; color: #0c0c0c; }
.lightbox__count { position: fixed; bottom: clamp(1rem, 3vw, 2rem); left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, .7); font-size: .85rem; letter-spacing: .1em; }
@media (max-width: 768px) { .lightbox__close, .lightbox__nav { cursor: pointer; } }

/* ---------- Packaging blocks (full-width left-justified text + 16:9 image) ---------- */
.lintro__text p + p { margin-top: 1rem; }
/* packaging intro: widen to image width, justify-left (headline stays centered) */
div.lintro__text { max-width: none; margin-inline: 0; text-align: justify; }
.pkg { margin-bottom: clamp(3rem, 7vw, 6rem); }
.pkg:last-of-type { margin-bottom: 0; }
.pkg__text { margin: 0 0 clamp(1.75rem, 3.5vw, 2.75rem); text-align: left; }
.pkg__name {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1.1; letter-spacing: -0.02em;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  white-space: nowrap;
}
.pkg__text p { font-size: clamp(.95rem, 1.2vw, 1.05rem); line-height: 1.7; text-align: justify; }
.pkg__text p + p { margin-top: 1rem; }
@media (max-width: 760px) { .pkg__name { white-space: normal; } }

/* ---------- Agency credit line (reused under every credited project) ----------
   Same subtle, muted treatment as the original "Development by JustWeb." note. */
.credit {
  margin-top: clamp(1rem, 2vw, 1.5rem);
  color: var(--muted);
  font-style: italic;
  font-size: .85rem;
  line-height: 1.6;
}
/* win over the justified .pkg__text p rule for credits inside packaging blocks */
.pkg__text .credit { font-size: .85rem; text-align: left; }

/* ---------- Real project images (replace placeholders) ---------- */
.shot { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.shot + .shot { margin-top: clamp(1rem, 3vw, 2rem); }
/* side-by-side pairs must not inherit the vertical stacking margin */
.bpair .shot { margin-top: 0; }

/* ---------- Fragments: free-flowing project + subsection blocks ---------- */
.fproject { margin-bottom: clamp(2rem, 4vw, 3rem); }
.fproject__name {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1.05; letter-spacing: -0.02em;
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.fproject__body { font-size: clamp(.95rem, 1.2vw, 1.1rem); line-height: 1.7; text-align: justify; }
.fsub { margin: clamp(2rem, 4vw, 3rem) 0; }
.fsub__name {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.4rem, 2.8vw, 2.2rem);
  line-height: 1.1; letter-spacing: -0.02em;
  margin-bottom: clamp(.9rem, 2vw, 1.4rem);
}
.fsub p { font-size: clamp(.95rem, 1.2vw, 1.05rem); line-height: 1.7; text-align: justify; }
.fsub p + p { margin-top: 1rem; }
/* images that sit directly in the fragments flow */
.fmedia { margin: clamp(2rem, 4vw, 3rem) 0; }

/* ---------- Gallery: centered heading + portrait (tall) variant ---------- */
.ghead {
  text-align: center;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2.6rem); letter-spacing: -0.02em;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.gallery--tall .gallery__item { aspect-ratio: 3 / 4; }

/* ============================================================
   STYLING PASS - 2026-06-18 (rev 4)
   Glass panels (see-through dark @40%, seamless bar) · rounded
   corners (14px) · scroll reveals with image clip-wipe.
   (Aurora, cursor/edge glow, and a logo trace were each tried
   then removed per client. Hero monogram is back to original.)
   Self-contained block; remove to revert to the plain B&W base.
   ============================================================ */

:root {
  --r-img: 14px;   /* image / card corner radius (restored - 8px read as "no rounding") */
  --r-btn: 9px;    /* button corner radius (proportional) */
}
/* NB: dark panels are now see-through to the (light) index - no dark backdrop.
   Tradeoff: light panel text contrast drops over bright index areas (see report). */

/* ---------- Glass panels (translucent over a blurred page) ---------- */
.panel {
  background: rgba(247, 247, 247, 0.80);
  -webkit-backdrop-filter: blur(22px);
          backdrop-filter: blur(22px);
}
/* sticky bar: transparent itself, glass+blur lives in a masked ::before that
   fades to nothing at the bottom -> seamless transition into the content */
.panel__bar {
  background: transparent;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
.panel__bar::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0; bottom: -40px;
  z-index: -1;
  pointer-events: none;
  background: rgba(247, 247, 247, 0.82);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 46%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 46%, transparent 100%);
}
.panel--dark {
  background: rgba(12, 12, 12, 0.85);
}
.panel--dark .panel__bar::before {
  background: rgba(12, 12, 12, 0.80);
}
/* fallback: no backdrop-filter support -> solid surfaces */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .panel,        .panel__bar        { background: var(--paper); }
  .panel--dark,  .panel--dark .panel__bar { background: #0c0c0c; }
}

/* ---------- Rounded corners ---------- */
.shot,
.about__photo,
.lblock__logo,
.ladditional__img,
.gallery__item,
.lightbox__img,
.lightbox__ph { border-radius: var(--r-img); }

.chip,
.dl,
.panel__close,
.panel__back,
.lightbox__close,
.lightbox__nav { border-radius: var(--r-btn); }

/* gallery thumbs are <button>s - kill the UA 2px "outset" bevel that read as a
   light glow edge on dark panels (this was the "glow oko slika") */
.gallery__item { border: none; }

/* logo boxes hold transparent black-line SVGs - give them a solid white card
   bg so the now-translucent panel (blurred index) doesn't show behind the logo */
.lblock__logo { background: #fff; }

/* ---------- Image wrappers (added by JS) - layout-neutral ---------- */
.glowfig { display: block; position: relative; border-radius: var(--r-img); }
.glowfig > img { display: block; width: 100%; height: auto; margin: 0; }
.glowfig + .glowfig { margin-top: clamp(1rem, 3vw, 2rem); }
.bpair .glowfig { margin-top: 0; }
.glowfig:has(.fmedia) { margin: clamp(2rem, 4vw, 3rem) 0; }

/* ---------- Richer scroll reveals inside panels ---------- */
.panel .r {
  opacity: 0;
  transform: translateY(38px);
  filter: blur(5px);
  transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
}
.panel .r.is-in { opacity: 1; transform: none; filter: none; }

/* images get a clip "wipe up" + slow zoom-out instead of a plain rise */
.panel .glowfig.r {
  transform: none;
  clip-path: inset(0 0 16% 0 round var(--r-img));
  transition: opacity .9s var(--ease), filter .9s var(--ease), clip-path 1s var(--ease);
}
.panel .glowfig.r.is-in { clip-path: inset(0 0 0 0 round var(--r-img)); }
.panel .glowfig.r > img { transform: scale(1.06); transition: transform 1.15s var(--ease); }
.panel .glowfig.r.is-in > img { transform: none; }

/* richer base for the main-page reveals (JS clears the blur) */
.reveal { filter: blur(6px); }

/* ---------- Header brand role suffix ("- Creative Designer") ---------- */
.brand__role {
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.01em;
  opacity: .6;
}
@media (max-width: 680px) { .brand__role { display: none; } }

/* ---------- Contact email: hover underline only as wide as the text ----------
   .contact is a flex column (align-items:stretch) so the inline-block link was
   stretching full-width, making its ::after underline span the whole row. */
.contact__mail { align-self: flex-start; }

/* (Logo gradient-trace experiment removed - the hero monogram is back to its
   original faint, slow-rotating state from the base .hero__mark rule.) */

/* ---------- Respect reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .panel .r { opacity: 1; transform: none; filter: none; transition: none; }
  .panel .glowfig.r { clip-path: none; }
  .panel .glowfig.r > img { transform: none; }
  .reveal { filter: none; }
}

/* ============================================================
   RAW / CLEAN visual mode (trial - 2026-06-20)
   Self-contained: delete this whole block + theme.js + the .themeswitch
   markup + the .hero__art <img> to fully revert. Clean = untouched B&W base.
   Raw = grunge texture sitewide + hero illustration, glass panels swapped
   for the texture (no blur), header/hero text auto-inverts via blend mode.
   ============================================================ */

/* ---------- Clean / Raw switch (segmented pill, fully rounded) ---------- */
.themeswitch {
  position: fixed;
  top: calc(var(--pad) + 1px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 101;   /* above the full-width .site-header (z-index:100) so clicks land */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.themeswitch__pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: #fff;                          /* solid white so it reads over the busy art */
  box-shadow: 0 3px 16px rgba(0, 0, 0, .16); /* soft lift to separate it from the texture */
}
.themeswitch__label {
  font-family: var(--display);
  font-weight: 500;
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: .65;
}
.themeswitch__opt {
  font-family: var(--display);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .02em;
  line-height: 1;
  padding: .45rem .9rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink);
  cursor: inherit;
  opacity: .5;
  transition: background .3s var(--ease), color .3s var(--ease), opacity .3s var(--ease);
}
.themeswitch__opt.is-active { background: var(--ink); color: var(--paper); opacity: 1; }
.themeswitch__opt:hover { opacity: .85; }
.themeswitch__opt.is-active:hover { opacity: 1; }
@media (max-width: 768px) { .themeswitch__opt { cursor: pointer; } }

/* mobile: drop into the hero below the nav, NOT sticky (scrolls away) */
@media (max-width: 600px) {
  .themeswitch { position: absolute; top: calc(var(--pad) + 74px); }
}
/* Raw: the caption sits half over the light texture, half over the dark artwork
   (its right part). `difference` can't work here (.themeswitch is a positioned
   stacking context, so the blend has no page backdrop and just goes white).
   A tight white halo keeps the dark text legible on BOTH light and dark. */
body.theme-raw .themeswitch__label {
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 5px #fff, 0 1px 1px #fff;
}

/* ---------- Hero illustration (shown only in Raw) ---------- */
.hero__art {
  position: absolute;
  top: 0;              /* starts at the very top of the page */
  right: -3vw;
  height: 98vh;        /* fills the hero top-to-bottom; <100vh so the hero's
                          overflow:hidden doesn't hard-clip the feathered edge */
  width: auto;
  z-index: 0;          /* behind the hero text (z-index:1) */
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s var(--ease);
}
body.theme-raw .hero__art { opacity: 1; }
body.theme-raw .hero__mark { display: none; }   /* hide faint monogram in Raw */

@media (max-width: 600px) {
  /* cropped figure: smaller + pushed well to the right so the left ~40% stays
     clean for the text; left edge lands around mid-screen */
  .hero__art { height: 80vh; right: -70vw; }
}

/* ---------- Raw: grunge texture sitewide ---------- */
body.theme-raw {
  background: var(--paper) url("theme/bg-light.webp") center / cover fixed;
}

/* hero + tagline text auto-invert over texture AND illustration
   (same difference-blend trick the header/cursor already use) */
body.theme-raw .hero__lockup,
body.theme-raw .hero__tagline {
  mix-blend-mode: difference;
  color: #fff;
}

/* ---------- Raw: work panels lose the glass, gain the texture ---------- */
body.theme-raw .panel {
  background: url("theme/bg-light.webp") center / cover fixed;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
body.theme-raw .panel--dark {
  background: url("theme/bg-dark.webp") center / cover fixed;
}
/* sticky bar: fully transparent - the panel's single fixed texture shows
   straight through, so there's no hard "seam" where a separate bar bg would cut */
body.theme-raw .panel__bar::before { display: none; }
body.theme-raw .panel__bar,
body.theme-raw .panel--dark .panel__bar { background: transparent; }

/* ---------- Raw: mobile hero refinements ---------- */
/* the name + tagline line-breaks (.hero__namebr / .hero__br) stay hidden
   everywhere except Raw-on-mobile, so Clean mode is untouched */
.hero__namebr, .hero__br { display: none; }
.hero__titlebr, .hero__leaddot { display: none; }
@media (max-width: 600px) {
  body.theme-raw .hero__namebr { display: inline; }    /* Stefan / Stojanović on two lines */
  body.theme-raw .hero__br { display: inline; }         /* tagline breaks into three lines */
  body.theme-raw .hero__titlebr { display: inline; }    /* Graphic / Designer on two lines */
  body.theme-raw .hero__leaddot { display: inline; }    /* leading "·" so every tagline line starts with a dot */
  /* bigger Raw hero type so the text reaches across to the illustration */
  body.theme-raw .hero__name { line-height: .95; font-size: 6vw; }
  body.theme-raw .hero__title { font-size: 12.6vw; }
  body.theme-raw .hero__tagline { font-size: 4.7vw; line-height: 1.35; }
}

/* ---------- Raw: EN/SR language switch gets a solid white pill ----------
   The header normally blends (difference) over the art; over the busy/yellow
   texture the language toggle washed out. In Raw we drop the group blend and
   re-apply it per-element to the brand + nav links (so THEY still invert over
   the art), while the EN/SR switch sits on its own readable white pill. */
body.theme-raw .site-header { mix-blend-mode: normal; color: var(--ink); }
/* The header sits over the light texture (the top of both the page bg and the
   artwork is light). Per-element `difference` does NOT work here - the header is
   a fixed+z-index stacking context, so a child's blend has only the header's
   transparent backdrop to mix with and the text stays white. So: plain DARK text. */
body.theme-raw .brand,
body.theme-raw .brand__mark,
body.theme-raw .nav > a { color: var(--ink); }
body.theme-raw .lang {
  background: #fff;
  border: 1px solid var(--ink);            /* outline so the white pill reads on light texture too */
  border-radius: 999px;
  padding: 1px .35rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .14);
}
body.theme-raw .lang__opt {
  color: var(--ink);
  min-height: 0;                           /* drop the 44px touch box -> compact pill, hugs the text */
  padding: .25rem .35rem;
}
body.theme-raw .lang__opt.is-active { opacity: 1; }
body.theme-raw .lang__sep { color: var(--ink); }

/* soft light veil at the very top so the dark header text stays readable across
   the full width, even where it crosses the illustration (sits above the art,
   below the header z-index:100). The artwork "emerges" from a gentle top fade. */
body.theme-raw::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 150px;
  z-index: 90;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(247, 247, 247, .96) 0,
    rgba(247, 247, 247, .9) 46px,
    rgba(247, 247, 247, .5) 100px,
    rgba(247, 247, 247, 0) 150px);
}

/* ============================================================
   Header hide-on-scroll (BOTH modes, both languages, main + panels)
   Scroll down -> the top chrome slides away so it never crosses the
   content; scroll up -> it comes back. Driven by initHideOnScroll() (script.js).
   ============================================================ */
.site-header,
.themeswitch { transition: transform .4s var(--ease), opacity .4s var(--ease); }
body.chrome-hidden .site-header { transform: translateY(-115%); }
/* theme switch shows ONLY in the hero zone (top of page); it does NOT follow the
   header's scroll-up reveal - once you leave the hero it stays gone until you return */
body.past-hero .themeswitch { transform: translate(-50%, -160%); opacity: 0; pointer-events: none; }
@media (max-width: 600px) {
  /* mobile switch is absolute in the hero and scrolls away on its own - leave it */
  body.past-hero .themeswitch { transform: translateX(-50%); opacity: 1; pointer-events: auto; }
}
.panel__bar { transition: transform .4s var(--ease); }
.panel.bar-hidden .panel__bar { transform: translateY(-115%); }

/* ============================================================
   2026-06-21 - mobile hero layout refinements (Clean vs Raw)
   ============================================================ */

/* Mobile RAW: end the hero at the illustration's bottom edge (art is 80vh,
   top:0) so there's no empty band between the hero and the intro text. */
@media (max-width: 600px) {
  body.theme-raw .hero { min-height: 80vh; }
}

/* Mobile CLEAN: the rotating monogram becomes a centered, larger focal
   watermark; name + title + tagline are centered; the hero is tightened so
   there is less empty space before the scroll cue / intro. */
@media (max-width: 600px) {
  body:not(.theme-raw) .hero { min-height: 84vh; text-align: center; }
  body:not(.theme-raw) .hero__bg {
    top: 50%; left: 50%; right: auto;
    transform: translate(-50%, -50%);
    width: min(94vw, 62vh);
  }
  body:not(.theme-raw) .hero__mark { opacity: .05; }
}