:root {
  --ink: #0e1b1d;
  --paper: #edf1ef;
  --blue: #9fc8c1;
  --orange: #d9825b;
  --line: rgba(237, 241, 239, .18);
}

.hero-media {
  background-image: url('posledna-sezona-hero.jpg');
  background-position: center;
  background-size: cover;
}

.hero-shade {
  background:
    linear-gradient(90deg, rgba(6,18,20,.82) 0%, rgba(6,18,20,.34) 52%, rgba(6,18,20,.08) 100%),
    linear-gradient(0deg, rgba(6,18,20,.62) 0%, transparent 52%);
}

.latest-film {
  margin-left: 31vw;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.latest-film span,
.latest-film small {
  font: 400 .68rem 'DM Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.latest-film strong {
  font: 500 clamp(1.2rem, 2vw, 1.8rem) Unbounded, sans-serif;
}

.season::before {
  background-image: url('posledna-sezona-project.jpg');
  background-position: center;
  background-size: cover;
}

.project-link {
  display: inline-block;
  margin-top: 1.25rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid currentColor;
  font: 500 .72rem 'DM Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.project-link:hover { color: #2f6c69; }
.project-links { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; }
.project-link-primary { color: #2f6c69; }
.project-link-primary:hover { color: var(--ink); }
.film-trailer {
  grid-column: 1 / -1;
  margin-top: clamp(.75rem, 1.5vw, 1.5rem);
}
.film-trailer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .8rem 0;
  border-top: 1px solid rgba(14,27,29,.28);
  font: 500 .68rem 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .09em;
}
.film-trailer-head a { color: #2f6c69; }
.film-trailer-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #0e1b1d; }
.film-trailer-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.season, .mist { aspect-ratio: 2.39 / 1; }
.mist img { width: 100%; height: 100%; display: block; object-fit: cover; }
.season .grain { display: none; }
.film-gallery {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.55rem, 1vw, 1rem);
  margin-top: clamp(.5rem, 1vw, 1.25rem);
}
.film-gallery figure { margin: 0; overflow: hidden; background: #132326; }
.film-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 2.39 / 1;
  object-fit: cover;
  transition: transform .55s cubic-bezier(.2,.75,.2,1);
}
.film-gallery figure:hover img { transform: scale(1.025); }
.project-reverse > .film-gallery { order: 3; }
.ballad { aspect-ratio: 619 / 305; }
.silent { aspect-ratio: 16 / 9; }
.ballad::before,
.silent::before { display: none; }
.ballad img,
.silent img { width: 100%; height: 100%; display: block; object-fit: cover; }
@media (max-width: 800px) {
  .latest-film { margin-left: 0; }
  .hero-media { background-position: 55% center; }
}

/* Cinematic editorial typography */
body { font-family: 'IBM Plex Sans', system-ui, sans-serif; }
.brand,
h1,
.section-head h2,
.profile h2,
.contact h2,
.project-copy h3,
.film-title,
.disciplines h3,
.latest-film strong,
.contact-link { font-family: 'Bricolage Grotesque', system-ui, sans-serif; }
h1 i,
.section-head h2 i,
.profile h2 i,
.contact h2 i { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-style: normal; }
h1 i { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 600; font-size: 1.15em; letter-spacing: -.045em; }
.site-header nav,
.eyebrow,
.kicker,
.frame-count,
.project-copy > div,
.project-copy .credits,
.project-link,
.latest-film span,
.latest-film small,
footer { font-family: 'IBM Plex Mono', monospace; }

.site-header {
  top: .9rem;
  height: 52px;
  border-bottom: 0;
  background: transparent;
  backdrop-filter: none;
  pointer-events: none;
}
.site-header .brand,
.header-actions {
  pointer-events: auto;
  border: 1px solid rgba(237,241,239,.16);
  background: rgba(8,22,24,.68);
  box-shadow: 0 8px 30px rgba(2,10,12,.14);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}
.site-header .brand {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.header-actions {
  min-height: 52px;
  padding: 0 1rem 0 1.25rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
}
.lang-switch {
  display: flex;
  align-items: center;
  gap: .35rem;
  font: 500 .68rem 'IBM Plex Mono', monospace;
  letter-spacing: .08em;
}
.lang-switch button {
  padding: .35rem .15rem;
  border: 0;
  background: transparent;
  color: rgba(237,241,239,.58);
  font: inherit;
  cursor: pointer;
  transition: color .2s;
}
.lang-switch button:hover,
.lang-switch button[aria-pressed="true"] { color: var(--paper); }
.lang-switch span { color: rgba(237,241,239,.28); }
h1 { font-size: clamp(4.4rem, 11vw, 9.8rem); line-height: .76; letter-spacing: -.082em; font-weight: 750; }
.hero-content { padding-top: clamp(7rem, 13vh, 9rem); }
.works { padding-top: 7.5rem; padding-bottom: 7.5rem; }
.section-head { margin-bottom: 5rem; }
.section-head h2,
.profile h2,
.contact h2 { font-size: clamp(2.7rem, 5.4vw, 5.5rem); letter-spacing: -.065em; font-weight: 700; line-height: .92; }
.project { gap: clamp(2rem, 4.5vw, 5rem); margin-bottom: 7rem; }
.project-copy h3 { font-size: clamp(1.9rem, 3vw, 3.2rem); margin: 1.8rem 0 1.15rem; font-weight: 700; letter-spacing: -.055em; }
.project-copy h3 small { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-style: normal; font-weight: 500; letter-spacing: 0; }
.section-head h2 i,
.profile h2 i,
.project-copy h3 small { color: #2f6c69; }
.project-copy p { line-height: 1.58; }
.profile {
  padding-top: 7.5rem;
  padding-bottom: 7.5rem;
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
  gap: clamp(2.5rem, 6vw, 7rem);
  align-items: center;
}
.profile-photo { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.profile-photo img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 42%; }
.profile-copy { max-width: 950px; }
.profile-copy .lead { margin: 2rem 0 0; }
.media {
  padding: 7.5rem 7vw;
  background: #dce6e3;
  color: var(--ink);
}
.media-head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: start;
  margin-bottom: 4.5rem;
}
.media-head h2 {
  margin: 0;
  font: 700 clamp(2.7rem, 5.4vw, 5.5rem)/.92 'Bricolage Grotesque', system-ui, sans-serif;
  letter-spacing: -.065em;
}
.media-head h2 i {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  color: #2f6c69;
}
.media-feature {
  display: block;
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
}
.media-feature-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 340px;
  padding: clamp(2.5rem, 4vw, 4.5rem);
  background: var(--ink);
}
.media-meta,
.media-source,
.media-kind,
.media-action {
  font: 500 .68rem 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .09em;
}
.media-meta { color: var(--blue); }
.media-feature h3 {
  margin: 1.35rem 0 1rem;
  font: 700 clamp(2rem, 3.1vw, 3.5rem)/.98 'Bricolage Grotesque', system-ui, sans-serif;
  letter-spacing: -.055em;
}
.media-feature p { max-width: 740px; margin: 0 0 2.3rem; color: #b9c4c4; line-height: 1.6; }
.media-action { display: flex; justify-content: space-between; padding-top: 1rem; border-top: 1px solid var(--line); }
.media-action b { font-size: 1rem; transition: transform .2s; }
.media-feature:hover .media-action b { transform: translate(5px,-5px); }
.media-list { margin-top: 2rem; border-top: 1px solid rgba(14,27,29,.28); }
.media-item {
  display: grid;
  grid-template-columns: minmax(7rem, .7fr) minmax(0, 2fr) minmax(7rem, .55fr) auto;
  gap: clamp(1rem, 2.5vw, 3rem);
  align-items: center;
  padding: 1.55rem 0;
  border-bottom: 1px solid rgba(14,27,29,.28);
}
.media-item h3 {
  margin: 0;
  font: 650 clamp(1.05rem, 1.7vw, 1.55rem)/1.2 'Bricolage Grotesque', system-ui, sans-serif;
  letter-spacing: -.035em;
}
.media-source { color: #2f6c69; }
.media-kind { color: #596c6b; }
.media-item i { font-family: inherit; font-style: normal; font-size: 1.1rem; transition: transform .2s; }
.media-item:hover h3 { color: #2f6c69; }
.media-item:hover i { transform: translate(5px,-5px); }
.media-item-static i {
  font: 500 .65rem 'IBM Plex Mono', monospace;
  letter-spacing: .1em;
  color: #596c6b;
}
.media-item-static:hover h3 { color: inherit; }
.media-item-static:hover i { transform: none; }
.contact { padding-top: 7.5rem; }
.contact h2 { margin: 1.5rem 0 4rem; }

.ballad { background: #b9c9de; color: #080a0d; }
.ballad::before {
  background: linear-gradient(145deg, #1c2733 0 35%, transparent 35.2%), linear-gradient(35deg, transparent 0 64%, #e96a3b 64.2%);
  opacity: .9;
}
.ballad .film-title { color: #fff; font-size: clamp(1.6rem, 3.8vw, 4rem); }

.contact-options { border-top: 1px solid rgba(8,10,13,.35); }
.contact-link { display: grid; grid-template-columns: 9rem 1fr auto; gap: 2rem; padding: 1.55rem 0; border-top: 0; }
.contact-link + .contact-link { border-top: 1px solid rgba(8,10,13,.22); }
.contact-link > span { font: 500 .7rem 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: .1em; }
.contact-link strong { font-weight: 500; }
.contact-link i { font: inherit; transition: transform .2s; }
.contact-link:hover i { transform: translate(5px,-5px); }

@media (max-width: 800px) {
  .site-header { top: .65rem; height: 48px; padding: 0 5vw; }
  .site-header .brand { width: 48px; height: 48px; }
  .header-actions { min-height: 48px; padding: 0 .8rem; gap: 1rem; }
  .lang-switch { order: 2; }
  .menu-toggle { order: 1; }
  .site-header nav { order: 3; }
  .site-header nav {
    position: fixed;
    top: 4.4rem;
    left: 5vw;
    right: 5vw;
    padding: 1.5rem;
    border: 1px solid rgba(237,241,239,.14);
    border-radius: 1rem;
    background: rgba(8,22,24,.94);
    box-shadow: 0 18px 45px rgba(2,10,12,.24);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
  .works { padding-top: 6rem; padding-bottom: 6rem; }
  .project { margin-bottom: 5.5rem; }
  .profile { grid-template-columns: 1fr; gap: 2.5rem; }
  .media { padding: 6rem 6vw; }
  .media-head { grid-template-columns: 1fr; gap: 2rem; margin-bottom: 3rem; }
  .media-feature-copy { min-height: 300px; padding: 2rem; }
  .media-item { grid-template-columns: 1fr auto; gap: .65rem 1rem; padding: 1.35rem 0; }
  .media-item h3 { grid-column: 1; }
  .media-kind { grid-column: 1; }
  .media-item i { grid-column: 2; grid-row: 1 / 4; }
  .film-gallery { grid-template-columns: 1fr; gap: .75rem; margin-top: .25rem; }
  .contact-link { grid-template-columns: 1fr auto; gap: .45rem 1rem; }
  .contact-link > span { grid-column: 1 / -1; }
  .contact-link strong { overflow-wrap: anywhere; }
}